Question

我想用setState来返回函数中的结果，但是我得到了错误：太多的重新提交。在我的情况下如何避免这种情况？

    const [selectedItems, setState] = React.useState([]);
      const [arr, setArr] = React.useState([]);
      const handleChange = selectedItems => {
        setState(selectedItems);
      };

      const search = selectedItems => {
        selectedItems =
          selectedItems.length < 2
            ? selectedItems.join(",").toLowerCase()
            : selectedItems
                .slice(selectedItems.length - 1)
                .join(",")
                .toLowerCase();
        let arrayOfMatchedObjects = elements.filter(object => {
          return JSON.stringify(object)
            .toString()
            .toLowerCase()
            .includes(selectedItems);
        });

        return setArr(arrayOfMatchedObjects); //here i setSate
      };

链接：https://codesandbox.io/s/divine-frost-skle2

Answer 1

删除此行：

  console.log(search(selectedItems));

，然后看到错误消失了。发生这种情况的原因是，基本上在渲染内部，您正在调用search-设置状态并导致重新渲染（因此循环）。在这种情况下，从函数返回它并不重要（尽管为什么要以这种方式返回它很奇怪）。

Answer 2

好的，突出的一件事是您已经声明了

const [selectedItems, setState] = React.useState([]);

然后就在您拥有

  const handleChange = selectedItems => {
    setState(selectedItems);
  };

对我来说，handleChange函数有点模糊，将在setState中调用两个“ selectedItems”中的哪个。即传递的变量或在useState中声明的变量。

先解决此问题！

React中的重新渲染次数过多

2 个答案: