React UseEffect渲染无限循环

Question

我的代码中似乎有一个无限循环，但我似乎看不到在哪里，如果我设置的是useEffect依赖项的状态，我通常会看到这一点，但这里两个变量(值/项(是完全分离的。

App.js

import React from 'react';
import './style.css';
import MyComponent from './MyComponent.js';
export default function App() {
return (
<div>
<MyComponent />
</div>
);
}

MyComponent.js

import React, { useEffect, useState } from 'react';
const MyComponent = ({ values = [] }) => {
console.log('MyComponent Reloaded');
const [items, setItems] = useState();
useEffect(() => {
const loadItems = () => {
//setItems([]);   //why does this cause infinite render loop?
};
loadItems();
}, [values]);
return <></>;
};
export default MyComponent;

为什么会导致渲染循环？

我在这里有一个构建示例(取消注释注释行以开始渲染循环(

Answer 1

您需要以正确的方式引入道具的默认值：

import React, { useEffect, useState } from 'react';
const MyComponent = ({ values }) => {
console.log('MyComponent Reloaded');
const [items, setItems] = useState();
useEffect(() => {
console.log(values)
const loadItems = () => {
setItems([]);
};
loadItems();
}, [values]);
return <></>;
};
MyComponent.defaultProps = {
values: []
}
export default MyComponent;

Answer 2

代码中可能存在两个错误：

• 根据您的代码，每次都会创建values变量，当与上一个values变量进行检查时，它是不相同的。所以它导致了无限循环。

  • 要修复此问题，请使用默认道具。

    const MyComponent = ({ values }) => {
    ...
    MyComponent.defaultProps = {
    values: []
    }
    

• 正如你的问题一样，这条线会导致的无限循环

  //setItems([]);
  

  • 克服

    将items依赖项与values一起添加，以便在重新渲染之前监视这两个值。

    useEffect(() => {
    console.log(values)
    const loadItems = () => {
    setItems([]);
    };
    loadItems();
    }, [values,items]);