标题重写为：使用useState()钩子时，变量没有更新的问题

Question

我正在使用React做一个社交网络项目。

我想将一个组件从类组件替换为函数组件并使用hooks，然后出现了一个全局问题：

当我切换到一个新用户时，页面显示的是上一个用户的状态

我使用了useState() hook，调试了所有的东西，但是出于某种原因，当一个新的状态组件被渲染时，它不会更新

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

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

我以为问题是容器组件仍然是类组件，但是重新做了之后，什么都没有改变。

Answer 1

一种解决方法是使用useEffect钩子来在属性变化时触发更新。您可以使用该钩子来比较当前属性和先前属性，然后在状态中更新状态。

根据您自己的代码，可以将此作为参考并进行调整。

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

  useEffect(() => {
    setValue(props.status || "Empty");
  }, [props.status]);

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