传播算子-对于对象，无法识别其对象名称

Question

我将道具editing，selectedPost从父组件传递到子组件，以使用它来设置子组件中的状态。

当子组件被重新渲染时，我这样做是为了检查先前的editing，selectedPost是否与新传递的道具不同。

我以useEffect状态检查此差异，以验证是否需要将当前表单（帖子）的值更新为最新值。

但是我想知道逻辑是否有问题，因为子组件的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

您要做的就是将这些prevEditing和prevSelectedPost添加到依赖项列表中。如果这些依赖项中的任何一个得到更新，则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)

   }, [prevEditing, prevSelectedPost])