反应我们太多的重新渲染。React限制呈现次数以防止无限循环

Question

我很困惑为什么Iam会出现这个错误：太多的重新呈现。React限制呈现次数以防止无限循环。当我尝试调用USESTAT保存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 rerenders。你的循环来了。