在功能反应组件中无限重新渲染

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

您对 useEffect 的使用不正确。如果你的依赖数组是空的，它会在每次任何状态数据改变时被调用。结果你的 useEffect 被调用导致 setProposals 然后它再次导致 useEffect 到运行和等等

试试这个

useEffect(() => {
    getItems();
  } , []);   // an empty array means it will be called once only

Answer 2

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

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

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

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

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

Answer 3

我认为是这样的：useEffect 应该有第二个参数 [] 以确保它只执行一次。即：

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

否则 setProposal 将修改状态，这将触发 re-render，这将调用 useEffect，这将进行异步调用，这将 setProposal，。 ..

在功能反应组件中无限重新渲染

Infinite re-render in functional react component

asynchronous

infinite-loop

reactjs

axios

use-effect