Question

我很困惑为什么我会收到这个错误：重新渲染太多。 React 限制渲染次数以防止无限循环。当我尝试调用 useState 来保存 checkBoxList 数据时会发生这种情况。如果我注释掉 setListOptions(checkBoxList); 行，错误就会消失。我期望发生的是 setListoptions 应该保存在本地，然后我可以调用 listOptions 来映射我的数据。感谢您的帮助。

const ZoneDashboard: React.FC = () => {
  const [listOptions, setListOptions] = useState<EnumMapping[]>();
  const classes = useStyles();

  const renderOptions = () => {
    if (!showOptions) return <div />;
    let checkBoxListLookup = enumHardwareValuesLookup(17375, attribs);
    let checkboxEnabled = enumHardwareValuesLookup(16513, attribs);
    let checkBoxList = new Array<EnumMapping>();

    checkBoxListLookup.forEach(function (key) {
      let enabled = checkboxEnabled.some(function (enable) {
        return enable === key;
      });

      if (enabled) {
        let enumMapping = new EnumMapping(key, true);
        checkBoxList.push(enumMapping);
      }
    });
    setListOptions(checkBoxList);
    
  };

  return (
    <div>
    {renderOptions()}
    </div>
  );
};

export default ZoneDashboard

Answer 1

每次渲染组件时，都会调用 renderOptions()。每次调用 renderOptions 时，都会设置一个状态变量。每次设置状态变量时，React 都会重新渲染。这是你的循环。

反应 useState 重新渲染太多。 React 限制渲染次数以防止无限循环

1 个答案: