Question

我有一个对象 myObj，它是 data 对象的一个字段。我使用 useState 钩子用这个对象启动一个状态变量。

myObj 就像 {"name": "John", "age": 20, ...}。

import React, {useState} from 'react';

const myComponent = ({data}) => {
   const[student, setStudent] = useState(data.myObj); // myObj is a object with value
    
    console.log(`${JSON.stringfy(student)}`); // it prints undefined, why?


    return (
        // here I need to render the student information but it is undefined.
     )
}

我在这里是否误用了 useState 钩子？如果是这样，如何在 useState 钩子之后立即反映初始对象值，如上面的控制台日志中所示？

Answer 1

这里的问题是你的状态取决于道具。但是您需要检查一次是否需要这样做，如果您的状态是您的 prop 的转换值，则可能需要它。

但是如果你对你的 props 做的不多，那么你可以安全地移除它并直接使用 props 并使用它来渲染元素。因为即使组件的 props 发生变化，react 中的重新渲染也会被触发。

这篇文章很好地解释了为什么在大多数情况下需要依赖于 props 的状态。State Dependent on Props challenges

Answer 2

据我所知，您的 student 状态没有恢复。如果是这样，您必须使用 useEffect 钩子。

看，怎么样？

useEffect(() => {
    console.log(`${JSON.stringfy(student)}`);
}, [student])

在您的情况下，您在 student 块外使用 return，这就是没有打印控制台的原因。使用 useEffect，您将在成功存储后获得更新。

如果控制台对你来说不重要，那么你可以不使用useEffect，直接打印学生的值，

return (
    <View>
        <Text>{student}</Text>
    </View>
)

useState() 钩子具有初始值但未反映在状态变量中

2 个答案: