Question

我有一个 useEffect 和下面的依赖数组，但不明白为什么它无论如何都会继续重新渲染。获取 tuition 数据，然后将其添加到 program 数组中的 programData 对象的逻辑很简单。有人可以向我解释为什么在这里创建重新渲染循环吗？

这是一个 Next.js 应用程序。 getData 更新 props.tableData，从 redux 存储中传递。 tableData 是一个缓慢变化的值。

function ProgramsTable(props) {
  const router = useRouter();
  const locationId = router.query.id;
  const { tableData } = props;
  let programData = tableData;

  let tuitions = useSelector(state => state.tables.tuitions);

  useEffect(() => {
    getData();

    (async function() {
      if (Boolean(tuitions) === false) {
        tuitions = await getTuitionsByLocationId(locationId);
      }
    })();
    console.log(`tuitions`, tuitions);
    console.log(`tableData`, tableData); // both print continuously

    // merge tuition data onto matching program data
    programData = Array.from(programData).map(program => {
      const programId = program?.id;

      const tuitionsIsDefined = tuitions && Array.from(tuitions).length > 0;

      tuitionsIsDefined && tuitions.forEach(tuition => {
        const tuitionProgramId = tuition?.program?.id;

        if (tuitionProgramId === programId) {
          if (Array.isArray(program.tuitions) === false) {
            program.tuitions = [];
          }

          program.tuitions.push(tuition);
        }
      });

      return program;
    });

    console.log('edited programData', programData); // also prints continuously
  }, [tuitions, programData, tableData]);

Answer 1

这应该不断地重新渲染。它运作良好。原因如下。

tuitions、programData、tableData 所有这些依赖项都在 useEffect 回调中发生变化。

programData = Array.from(programData).map(...
//Creates a completely new programData.

这就是为什么它会创建一个无限循环。使用这些依赖项之一创建无限循环就足够了。

Answer 2

问题有点不清楚数据在哪里发生变化，为什么你一次订阅这 3 个对象，并且在这 3 个对象之间没有标志getTuitionsByLocationId，你必须在 useEffect [tuitions, programData, tableData] 中放置一个标志他们中的任何人都会在您的代码中的某处进行更新并重新渲染所有内容。

useEffect：依赖数组无法阻止无限重新渲染

2 个答案: