reactjs - 是什么导致错误：此代码中的重新渲染过多？

Question

任何人都可以看看下面的 ReactJS 组件并告诉它是什么导致它返回错误：

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

import React, { useState, useEffect } from 'react';

function Lab() { 

  const [questions, setQuestions] = useState([]);

  const addQuestion = (question) => {
    let q = [...questions];
    q.push(question);
    setQuestions(q);
  }

  addQuestion('What is your name?');
  addQuestion('Where do you belong?');
   
  return (
    <div>
       {
           questions.map( q => <div>{q}</div>)
       }
    </div>
  );
}

export default Lab;

编辑： 我可以在 中使用一些默认值useState([])，但这会使我的代码变得非常混乱，因为数据结构非常复杂。这就是为什么我想从辅助函数中推送默认值。不可以这样吗？

标签： reactjs

Answer 1

问题

• Lab功能被执行。
• addQuestion执行触发重新渲染
• 重新渲染触发另一个执行addQuestion

从而导致无限循环的重新渲染和 addQuestion 的执行。

解决方案

• 将您的默认问题添加为Lab组件中的默认状态。

import React, { useState, useEffect } from 'react';

const defaultQuestions = [
 'What is your name?', 'What is your name?'
]


function Lab() { 

  const [questions, setQuestions] = useState(defaultQuestions);

  const addQuestion = (question) => {
    let q = [...questions];
    q.push(question);
    setQuestions(q);
  }
   
  return (
    <div>
       {
           questions.map( q => <div>{q}</div>)
       }
    </div>
  );
}

export default Lab;