当在父组件中更新道具时，React 抛出过多的重新渲染错误

如何解决当在父组件中更新道具时，React 抛出过多的重新渲染错误

在我的 React 项目中，我有一个包含 2 个子组件的组件

搜索表单
员工项目列表（仅加载一次）

我想在页面加载时只加载一次员工项目。然后每次搜索表单值更改时，我都想过滤表数据。问题是每当我更改搜索输入时，都会导致太多的重新渲染错误

Too many re-renders. React limits the number of renders to prevent an infinite loop.

我检查了其他解决方案，但没有任何帮助我弄清楚这一点。请查看 CodeSandBox

中的示例

解决方法

它重新渲染是因为您正在传递搜索表单状态的道具，并且当您更改该状态（在搜索表单中键入）时，组件将重新渲染并执行您在其中的所有 if 语句，所以它运行的 setData 函数会触发另一个重新渲染，因为您更改了该组件的内部状态，然后开始无限循环渲染，因为每次它进入 if 语句时，它都会运行 { {1}} 函数具有不同的数组参数（请记住 JavaScript 通过引用处理所有非基本类型，因此每次 setData 执行时，它可能会返回相同的数组一个类似的数组，但它的另一个引用，因此对于 JavaScript，它不相同大批）。要解决此问题，您可以将所有 if 语句放在其他 data.filter() 钩子中，如下所示：

useEffect

Aldo 这段代码修复了错误，不会按预期工作，因为它会过滤列表，当你得到一个空列表时，它无法再次填充，所以网格将保持为空，直到你手动刷新页面，因此您应该在 JSX 上过滤列表而不更改状态/列表，例如：

useEffect(() => {
    // If statemenst
    if (
    props.formik.values.projectName !== undefined &&
    props.formik.values.projectName !== null &&
    props.formik.values.projectName !== ""
  ) {
    setData(data.filter((employeeProject) => employeeProject.projectName));
  }

  if (
    props.formik.values.projectType !== undefined &&
    props.formik.values.projectType !== null &&
    props.formik.values.projectType !== ""
  ) {
    setData(data.filter((employeeProject) => employeeProject.projectType));
  }
},[props.formik.values.projectName,props.formik.values.projectType])