当我根据其他状态更新状态时，React 给了我错误"Too many re-renders. React limits the number of renders to prevent an infi

Question

我试图根据其他状态更新状态，当状态更改时，它会给我一个错误

重新租赁太多。反应限制了防止无限环的渲染数。

const [filterState, setFilterState] = React.useState([{field: "dateFilter", value: {range: "ANY_TIME", start: "", end: ""}}]);
const [chartData, setChartData] = React.useState({successData, failData, categories, data});
const processData = (res) => {
  const data = res.sort(function(a, b) {
    var keyA = new Date(a.date),
    keyB = new Date(b.date);
    if (keyA < keyB) return -1;
    if (keyA > keyB) return 1;
    return 0;
  });
  categories = data.map((item) => (new Date(item['date'])).toLocaleDateString());
  successData = data.map((item) => item['success']);
  failData = data.map((item) => item['fail']);
  setChartData({...chartData, successData, failData, categories, data});
}
React.useEffect(() => {
  getLineChartCall().then(processData);//async call to get the data
}, []);    
if (filterState.length){
  if (filterState[0].value.range !== 'ANY_TIME') {
    const start = (new Date(filterState[0].value.start)).toISOString();
    const end = (new Date(filterState[0].value.end)).toISOString();
    const filteredData = chartData.data.filter(item => {
      const itemDate = (new Date(item.date).toISOString());
      return (start <= itemDate && end >= itemDate);
    });
    categories = filteredData.map((item) => (new Date(item['date'])).toLocaleDateString());
    successData = filteredData.map((item) => item['success']);
    failData = filteredData.map((item) => item['fail']);
    const data = chartData.data;
    setChartData({...chartData, successData, failData, categories, data});
  }
}
return (
  // render a component based on successData, failData and categories in chartData.
)

在更改FilterState时执行代码中的语句

setChartData({...chartData, successData, failData, categories, data});

，它导致错误

Answer 1

setChartData的呼叫正在引起问题，因为它在每个渲染上都发生。相反，您想要的是只有在其依赖性变化时才能重新运行。

if (filterState.length){
  if (filterState[0].value.range !== 'ANY_TIME') {
    const start = (new Date(filterState[0].value.start)).toISOString();
    const end = (new Date(filterState[0].value.end)).toISOString();
    const filteredData = chartData.data.filter(item => {
      const itemDate = (new Date(item.date).toISOString());
      return (start <= itemDate && end >= itemDate);
    });
    categories = filteredData.map((item) => (new Date(item['date'])).toLocaleDateString());
    successData = filteredData.map((item) => item['success']);
    failData = filteredData.map((item) => item['fail']);
    const data = chartData.data;
    setChartData({...chartData, successData, failData, categories, data}); <= HERE****
  }
}

一种替代方法是删除整个部分并添加useEffect钩：

React.useEffect(() => {
  // do the calculations required for setChartData, then:
  setChartData({ ...chartData, successData, failData, categories, data });
}, [/* array of dependencies, when do you want this to be recalculated? */])