在功能组件中获取后反应从父组件向子组件发送异步状态

Question

在设置来自提取的数据状态后，我正在尝试将异步状态值从父级发送到子级 API:

Profile.js

function Profile() {
  const { id } = useParams();
  const [user, setUser] = useState();

  useEffect(() => {
    const getUser = async () => {
      const response = await fetch(`http://localhost:8000/users/${id}`);
      const data = await response.json();
      setUser(data);
    };

    getUser();
  }, [id]);


   return (
    ...

    <Feed id={user._id} />

    ...
  )
}

Feed.js

function Feed(id) {

  const { user, isLoading, error } = useContext(AuthContext);

  useEffect(() => {
    const getPosts = async () => {
      const response = id
        ? await fetch(`http://localhost:8000/${id}`)
        : await fetch(`http://localhost:8000/home/${user._id}`);

      const data = await response.json();
      setPosts(data);
    };

    getPosts();
  }, [id, userId, user._id]);

  ...
}

在 Profile.js 组件上我通过使用可选的链接运算符 ?

解决了这个问题

  <div className={profileStyles.userItem}>
    phone: <span>{user?.phone}</span>
  </div>

但我不知道如何告诉 Feed.js 组件等待 id 属性，所以它将为空Feed.js 组件不会重新渲染，如何解决？

Answer 1

如果你想等待用户被获取，你可以渲染 Feed 只有当用户不是未定义的（所以它等待它被获取）：

{user && <Feed id={user._id} />

这样，组件Feed只有在用户未定义时才会被渲染

在功能组件中获取后反应从父组件向子组件发送异步状态

React sending async state from parent to child component after fetch in a functional component

state

asynchronous

rerender

reactjs

use-effect