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

【问题标题】：useState() hook with initial value but its not reflected in the state variableuseState() 具有初始值但未反映在状态变量中的钩子
【发布时间】：2021-05-26 12:32:59
【问题描述】：

我有一个对象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 钩子之后立即反映初始对象值，就像上面的控制台日志中显示的那样？

【问题讨论】：

标签： react-native react-hooks use-state

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

看看，怎么样？

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

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

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

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

【讨论】：

谢谢。有趣的是，您的建议正是我的代码，但它不会打印出学生，因为它在开始时是未定义的。让我们忘记控制台日志的事情。