Question

我有一个很小的问题，它的一个非常简单的组件无法显示我想要的内容。

const UserCards = (props) => {
  const [retrievedData, setRetrievedData] = useState();

  useEffect(() => {
    const data = [];

    props.users.map((user) => {
      data.push(<UserCard key={user.username} user={user} />);
    });
    setRetrievedData(data);
  }, []);

  return (
    <div className={styles.userCards}>{retrievedData && retrievedData}</div>
  );
};

当我刷新页面时，它不会显示我的用户卡。但是，如果我在useEffect上有一个超时：

const UserCards = (props) => {
  const [retrievedData, setRetrievedData] = useState();

  useEffect(() => {
    const data = [];
    setTimeout(function () {
      props.users.map((user) => {
        data.push(<UserCard key={user.username} user={user} />);
      });
      setRetrievedData(data);
    }, 3000);
  }, []);

  return (
    <div className={styles.userCards}>{retrievedData && retrievedData}</div>
  );
};

一切都很好！

我认为道具可以立即使用，但似乎我错了。

我尝试在useEffect的末尾添加[props]以确保如果props更改了，我的状态将被更新，但是什么也没有...

我确定没什么，但自昨天以来我一直在努力！

谢谢！

Answer 1

只需添加useEffect依赖项，就可以在依赖项更改时每次调用useEffect内容：

const UserCards = (props) => {
  const [retrievedData, setRetrievedData] = useState();

  useEffect(() => {
    const data = [];

    props.users.map((user) => {
      data.push(<UserCard key={user.username} user={user} />);
    });
    setRetrievedData(data);
  }, [props]);

  return (
    <div className={styles.userCards}>{retrievedData && retrievedData}</div>
  );
};

反应中的道具似乎无法立即使用

1 个答案: