React中useState无法通过Prop变量正确设置值的问题求助

你遇到的核心问题是：useState的初始值只会在组件首次渲染时赋值一次，后续父组件传的props更新后，state不会自动同步。给你几个可行的解决办法：

方法一：直接使用props（无需修改值的场景） #

如果子组件里只需要展示这个值，不需要修改它，完全没必要额外存到state里，直接用父组件传的props即可，避免同步问题。

方法二：用useEffect监听props变化同步state #

如果必须把props存到state且需要跟随props更新，就用useEffect监听目标prop，当它变化时更新state：

import { useState, useEffect } from 'react';

function Post({ post }) {
  const [currentPost, setCurrentPost] = useState(post);

  useEffect(() => {
    // 当props.post更新时，同步更新state
    setCurrentPost(post);
  }, [post]); // 依赖数组添加post，仅当post变化时触发

  // 后续使用currentPost即可
  return <div>{currentPost.title}</div>;
}

方法三：用useRef存储最新props（特殊场景） #

如果需要实时获取最新的props值，还可以用useRef：

import { useRef } from 'react';

function Post({ post }) {
  const postRef = useRef(post);
  
  useEffect(() => {
    postRef.current = post;
  }, [post]);

  // 后续通过postRef.current获取最新的props值
}

另外注意父组件的过滤逻辑，确保过滤后返回的是新数组（比如用filter方法，它会返回新数组），不要直接修改原数组，否则可能导致子组件无法触发重新渲染。

内容的提问来源于stack exchange，提问作者Apurba A