使用useState() Hook时变量未更新的React组件问题

核心问题是useState(props.status || "Empty")只会在组件首次挂载时初始化状态，当父组件切换用户导致props.status变化时，组件重新渲染但不会自动更新status的本地状态——因为useState的初始值仅在组件第一次渲染时生效，后续props变更不会触发状态同步。

下面是两种可行的修复方案：

方案一：用useEffect监听props变化同步状态 #

通过useEffect监听props.status的变化，一旦props更新就同步本地状态：

const ProfileStatus = (props) => {
  const [edditMode, setEdditMode] = useState(false);
  const [status, setValue] = useState(props.status || "Empty");

  // 监听props.status变化，同步更新本地状态
  useEffect(() => {
    setValue(props.status || "Empty");
  }, [props.status]); // 仅当props.status变化时执行

  const onInputChange = (e) => {
    setValue(e.target.value);
  };
  const activateMode = () => {
    setEdditMode(true);
  };
  const deactivateMode = () => {
    setEdditMode(false);
    props.updateUserStatus(status);
  };

  // 剩余渲染逻辑...
};

方案二：优化状态逻辑，仅编辑时维护本地状态 #

如果非编辑状态下不需要本地缓存，可以直接使用props的值，只在进入编辑模式时加载当前props状态到本地：

const ProfileStatus = (props) => {
  const [edditMode, setEdditMode] = useState(false);
  const [editStatus, setEditStatus] = useState("");

  const activateMode = () => {
    // 进入编辑时才同步props的最新状态
    setEditStatus(props.status || "Empty");
    setEdditMode(true);
  };

  const deactivateMode = () => {
    setEdditMode(false);
    props.updateUserStatus(editStatus);
  };

  const onInputChange = (e) => {
    setEditStatus(e.target.value);
  };

  return (
    <div>
      {!edditMode ? (
        <span onClick={activateMode}>{props.status || "Empty"}</span>
      ) : (
        <input
          value={editStatus}
          onChange={onInputChange}
          onBlur={deactivateMode}
          autoFocus
        />
      )}
    </div>
  );
};

另外你之前怀疑容器组件是类组件导致问题，其实这个问题和容器组件类型无关——不管容器是类还是函数组件，只要子组件的useState没有处理props更新，就会出现状态不同步的情况。

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