标题重写为：使用useState()钩子时，变量没有更新的问题-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

P粉066224086 2023-09-10 18:43:16

[React讨论组]

861

我正在使用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);
  };

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

P粉066224086

全部回复(1)

P粉6748763852023-09-11 17:31:34 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);
  };

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>