在映射时将项目添加到 useState 变量 array 会导致 React 本机函数组件中出现太多重新渲染错误

Question

我正在根据这样的变量呈现内容：

    <View style={styles.values}>{handleRender()}</View>

handleRender()函数：

  const handleRender = () => {
    return periodType === "Day"
      ? renderDaySelector()
      : periodType === "Week"
      ? renderWeekSelector()
      : periodType === "Month"
      ? renderMonthSelector()
      : renderYearSelector();
  };

我的问题是 renderWeekSelector():

  const renderWeekSelector = () => {
    let date = new Date();
    loadWeeks(date);
    return (
      <ScrollView
        style={{ width: "100%" }}
        onMomentumScrollEnd={() => laodWeeks(date)}
      >
        {weeks.map((e) => {
          return <AppCheckBox key={e.id} value={e.text} />;
        })}
      </ScrollView>
    );
  };

调用loadWeeks(date)函数：

 const loadWeeks = (date) => {
    let weeksWillUpdate = [...weeks];

    let weekString = "";
    for (let i = 0; i < 10; i++) {
      ... preparing the weekString;
      weeksWillUpdate.push({
        id: weeks.length + i,
        date: date,
        text: weekString,
      });
      weekString = "";
    }
// the problem is here when setting the weeks array variable
    setWeeks(weeksWillUpdate);

  };

星期变量：

  const [weeks, setWeeks] = useState([]);

此代码导致 too many re-renders 错误。请问我该如何解决？谢谢。

更新我也尝试过这种方法：

setWeeks((oldWeeks) => [
        ...oldWeeks,
        {
          id: weeks.length + i,
          date: date,
          text: weekString,
        },
      ]);

并删除了 setWeeks(weeksWillUpdate) 但仍然是同样的错误。

Answer 1

问题已解决

原来我的问题出在我调用 loadWeeks() 方法的地方。我更改了我的代码以加载 renderWeeksSelector() 方法之外的周数并且 re-render 错误消失了。

在映射时将项目添加到 useState 变量 array 会导致 React 本机函数组件中出现太多重新渲染错误

Adding items to a `useState` variable `array` while mapping it causes too many re-renders error in React native function component

arrays

react-native

react-hooks

use-state