扩展运算符 - 对于对象，无法识别其对象名称

Question

我正在将 propseditingselectedPost从父组件传递到子组件，以使用它来设置子组件中的状态。

我这样做是为了检查重新渲染子组件时，以前的editingselectedPost是否与新传递的 props 不同。

我在useEffect状态下检查此差异，以验证当前表单(post(的值是否需要使用最新值进行更新。

但我想知道逻辑是否有问题，因为子组件的prevEditing和prevSelectedPost将始终更新其与传递的 props 值相同的值？

export default function FeedEdit({editing, selectedPost){
const [ prevEditing, setPrevEditing ] = useState(editing)
const [ prevSelectedPost, setPrevSelectedPost ] = useState(selectedPost)
useEffect(() => {
if (
editing &&
//check if the logic here is correct
prevEditing !== editing &&
prevSelectedPost !== selectedPost
) {
const updatedPostForm = {
title: {
// ...title,
value: selectedPost.title,
valid: true
},
image: {
// ...image,
value: selectedPost.imagePath,
valid: true
},
content: {
// ...content,
value: selectedPost.content,
valid: true
}
}
setPostForm(updatedPostForm)
setFormIsValid(true)
}
}, [])
}

Answer 1

您所要做的就是将这些editing和selectedPost添加到依赖项列表中。如果这些依赖项中的任何一个得到更新，useEffects就会启动。以前，由于依赖项为空，因此不会触发useEffect。

const [ prevEditing, setPrevEditing ] = useState(editing)
const [ prevSelectedPost, setPrevSelectedPost ] = useState(selectedPost)
useEffect(() => {

const updatedPostForm = {
title: {
// ...title,
value: selectedPost.title,
valid: true
},
image: {
// ...image,
value: selectedPost.imagePath,
valid: true
},
content: {
// ...content,
value: selectedPost.content,
valid: true
}
}
setPostForm(updatedPostForm)

setFormIsValid(true)
}, [editing, selectedPost])