为啥在第一次组件渲染中未定义 useState 对象值？

Posted 2023-03-17

【中文标题】为啥在第一次组件渲染中未定义 useState 对象值？

【英文标题】：why useState object value is undefined in first time component render in react native?为什么在第一次组件渲染中未定义 useState 对象值？

【发布时间】：2021-10-31 23:54:26

【问题描述】：

我已经在函数 fetchProduct() 中设置了一个产品详细信息来设置产品使用状态。

const [ product, setProduct ] = useState()

const fetchProduct = () => 
    const apiURL = //api url;
    fetch(apiURL)
    .then((response) => response.json())
    .then(res => 
        setProduct(res.data[0])
    )
    .catch(error => 
        console.error(error);
    );

在我在 useEffect 挂钩中调用此函数之后。我已经通过 colsole 日志检查了产品是否已设置或未调用

useEffect(() => 
    fetchProduct()
    console.log(product)

    return () => 

    
,[])

我在控制台中得到以下结果

然后我再次刷新结果显示在控制台中。为什么第一次结果是空对象。感谢帮助

【问题讨论】：

它最初是一个空对象，因为这是useState()中的默认值。

嘿，谢谢您的回复，我如何才能像最初那样在 useState() 中实现 api fetch 功能

【参考方案1】：

获取产品是异步的，因为 setState 在检索和设置数据之前执行控制台日志

【参考方案2】：

useEffect 及其依赖数组有几种行为：

在您的示例中，您使用一个空数组，它充当-componentDidMount 并运行一次。

这就是为什么当您刷新组件时，它不再保留默认值 ，而是由您的函数更改的值。

在这种情况下，我会将 product state 添加到依赖数组中，这将导致 useEffect 在安装时执行 useEffect 中的代码，并且每当 product state 变化

了解更多https://reactjs.org/docs/hooks-effect.html

【参考方案3】：

在你的 javascript 开始执行时的 useEffect 中

FetchProduct 它继续编译下一行它不会停止，直到函数执行完成然后继续。 如果你想访问产品并做任何你想做的事情，你可以在你的之后使用另一个使用效果。

useEffect(() => 
   // Here you can access the product
  console.log(product);
, [product])

【讨论】：

感谢您的回复，我已经检查了您上面提到的另一个使用效果，但我得到的结果是，首先是空对象，下一个产品对象显示组件渲染一次。我有一个解决方案，产品对象将第一次显示。感谢您的帮助