时间戳

首页 > 解决方案 > 功能性反应组件中的无限重新渲染

reactjs - 功能性反应组件中的无限重新渲染

问题描述

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

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);
      }
    });
  }

有谁看到可能导致重新渲染的原因？谢谢！

标签： reactjsasynchronousaxiosinfinite-loopuse-effect

解决方案

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

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

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

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

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

推荐阅读