Reactjs React-useState未设置初始值

我正在重构以使用钩子，我遇到了一个非常令人困惑的问题

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

export const MakeComponent=props=>{
const{path，value，info，update}=props；
const[val，setVal]=使用状态（值）；
console.log（值，val）；//abc未定义
返回（…）
}

日志返回

abc undefined

——即props中的

value

已明确定义，但从

useState（value）

返回的第一个参数是

undefined

为了测试钩子是否工作正常，我尝试了

useState（“abc”）

，并按照预期记录了

abc

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

反应版本：

16.8.6

“编辑在这里”是父组件-就我所见，在这里没有什么奇怪的事情发生

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

---

正如注释中所提到的，

useState（initialState）

（或您所称的任何东西）将仅在第一次渲染时使用

initialState

在初始呈现期间，返回的状态（

state

）与作为第一个参数（

initialState

）传递的值相同

（，我的重点）

在此之后，在重新呈现时，useState函数不会根据传入的道具的新更改更改更改状态

要使更改在每次

值
更改时都得到反映，请在输入道具上注册一个效果，如下所示

export const MakeComponent=props=>{
const{path，value，info，update}=props；
const[val，setVal]=使用状态（值）；
useffect（（）=>{setVal（value）}，[value]）
返回（…）
}
如果您想更新道具更改的状态，您必须在此处添加
useffect
，它将侦听道具更改并相应地更新状态值

下面是更新后的代码片段

export const MakeComponent = props => {
     const { path, value, info, update } = props;
        
     const [val, setVal] = useState(value);
     useEffect(() => { setVal(value)}, [value] )
     return (<div>{val}</div>)
}

export const MakeComponent=props=>{
const{path，value，info，update}=props；
const[val，setVal]=使用状态（值）；
useffect（（）=>{setVal（value）}，[value]）
返回（{val}）
}

连接沙箱链接

当您将prop
值传递给
useState
时，还可以设置它的值<代码>值
本身可能尚未定义

另外，
setState
也不是真正的同步，因此如果
useState
使用与
setState
相同的机制，则您的状态
val
可能尚未设置为
value
初始值

在这种情况下，使用道具作为状态的初始值，应该使用没有依赖关系的副作用。第一次渲染完成后，效果将运行并使用prop设置状态。您可以让组件的初始值是未定义的，不传递任何内容也不会出现问题

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

  const [val, setVal] = useState();

  // get initial state after initial render
  useEffect(() => {
    setVal(value)
  }, [])
  console.log(value, val); // abc undefined then will log abc abc

 return (...)
}

请记住React中的道具是只读的，state用于读写。但是如果你使用一个道具作为一个状态的初始值，然后使用你用道具设置的状态，而不是道具，这是非常好的，不是反模式。这是为了保持一致性，因为在某些情况下，一次可能会有两个不同的值，分别来自一个prop和一个state

您的案例可能需要在任意时间关注道具的价值，具体取决于您的需求，正如上面答案中强调的那样。你的问题并没有说明这一点。不过，如果是这样，您可以将道具添加到效果的依赖项数组中，该数组设置该道具的状态，并且可以为您想要相同效果的其他道具编写单独的效果

如果您不需要为该数据编写代码，您根本不需要该模式，只需使用prop，它将是最新的，并且您将具有一致性。但是你显然是这样做的，我希望我上面建议的模式对你和对我一样有效。
你如何调用
MakeComponent
？像函数一样调用组件是无效的。但我的意思是，
{……道具}
它看起来怎么样？是否可以发布父组件的代码？请确保从props接收的“值”未定义。如果可能，是否共享一些好的代码段OK父级，但作为异步操作的结果？如果不太复杂，您可以创建一个。我认为
值
属性最初是
未定义的
，稍后更新，因此状态初始化为
未定义的
，这给了我一个
{object object}
的返回，调试器显示
val={value:undefined}
@idanicoleherbert添加了codesandbox演示，您可以将您的更改与之进行比较&更新这为我修复了它！谢谢！