reactjs - 将 useEffect 与属性 react 为依赖项会导致无限循环

Question

我有一个组件:

const MyComp : React.FC<{ editing?: Data }> = ({editing = { title = '', description = '', date: new Date() } }) => {
    const [data, setData] = useState<Data>({...editing})
    useEffect(() => setData({...editing}), [editing])
    return (/* use data inside here to render component */)
}

问题是 useEffect 是循环的，所以 React 检测到编辑 Prop 正在改变每个，问题是我使用 MyComp 没有任何像这样的 Prop :

<MyComp></MyComp>

这真的让我感到困惑，我现在对 React 的工作原理有点迷茫，关于为什么会发生这种情况的任何想法？

Answer 1

因为 editing是一个对象。对象通过引用进行比较。如果你不通过 Prop editing到组件，在每次渲染中，editing将在内存中收到一个新链接，因为您向它传递了一个默认值。所以useEffect将假定依赖项已更改。
您可以将原始类型设置为依赖项。

const MyComp : React.FC<{ editing?: Data }> = ({editing = { title = '', description = '', date: new Date() } }) => {
    const [data, setData] = useState<Data>({...editing})
    useEffect(() => setData({...editing}), [editing.title, editing.description, editing.date.getTime()])
    return (/* use data inside here to render component */)
}