为什么在第一次组件渲染中未定义 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 功能

标签： javascript react-native react-native-android use-effect

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

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