时间戳

首页 > 解决方案 > React - useState 未设置初始值

reactjs - React - useState 未设置初始值

问题描述

我正在重构以使用 Hooks，但我遇到了一个非常混乱的墙

我有一个基本的功能组件，如下所示：

export const MakeComponent = props => {
  const { path, value, info, update } = props;

  const [val, setVal] = useState(value);
  console.log(value, val); // abc undefined

 return (...)
}

日志返回abc undefined- 即value在 props 中明确定义，但返回的第一个参数useState(value)是undefined

只是为了测试钩子是否正常工作，我尝试并按预期useState("abc")记录了日志。abc

我不知道我做错了什么 - 有什么想法吗？

反应版本：16.8.6

这里的编辑是父组件 - 据我所知，这里没有什么特别的！

<MakeComponent
  path={key}
  value={item[key]}
  info={value}
  update={updateDiffs}
/>

标签： reactjsreact-hooks

解决方案

正如评论中提到的那样，useState(initialState)（或任何你称之为的）只会initialState在第一次渲染时使用。

在初始渲染期间，返回的状态 ( state) 与作为第一个参数 ( initialState) 传递的值相同。

（反应文档，强调我的）

此后，在重新渲染时，useState 函数不会根据传入的 props 的新更改来更改状态。

要使每次value更改都反映更改，请在输入道具上注册一个效果，如下所示

export const MakeComponent = props => {
  const { path, value, info, update } = props;

  const [val, setVal] = useState(value);
  useEffect(() => { setVal(value)}, [value] )

 return (...)
}

推荐阅读