reactjs - 在功能 react 组件中无限重新渲染

Question

我正在尝试设置变量“工作区”的状态，但是当我用控制台记录数据时，我得到了一个无限循环。我在 useEffect() 内部调用 axios“get”函数，并在这个循环之外调用控制台日志记录，所以我不知道是什么触发了所有重新渲染。我没有在 this question 中找到我的具体问题的答案。 .这是我的代码:

function WorkspaceDynamic({ match }) {
  const [proposals, setProposals] = useState([{}]);
  useEffect(() => {
    getItems();
  });

  const getItems = async () => {
    const proposalsList = await axios.get(
      "http://localhost:5000/api/proposals"
    );
    setProposals(proposalsList.data);
  };

  const [workspace, setWorkspace] = useState({});
  function findWorkspace() {
    proposals.map((workspace) => {
      if (workspace._id === match.params.id) {
        setWorkspace(workspace);
      }
    });
  }

有没有人看到可能导致重新渲染的原因？谢谢!

Answer 1

效果 Hook 在每个渲染周期运行，没有依赖数组的 Hook 将在每个渲染周期执行其回调。如果效果回调更新状态，即 proposals，则另一个渲染周期将入队，从而创建渲染循环。

如果你只想在组件挂载时运行一次效果，那么使用一个空的依赖数组。

useEffect(() => {
  getItems();
}, []);

如果您希望它仅在特定时间运行，例如匹配参数更新，则在数组中包含一个依赖项。

useEffect(() => {
  getItems();
}, [match]);