时间戳

首页 > 解决方案 > React useState 重新渲染次数过多。React 限制渲染次数以防止无限循环

reactjs - React useState 重新渲染次数过多。React 限制渲染次数以防止无限循环

问题描述

我对为什么会收到此错误感到困惑：重新渲染过多。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

标签： reactjs

解决方案

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

推荐阅读