即使在 React 中具有初始状态，状态也未定义

【问题标题】：State undefined even with initial state in React即使在 React 中具有初始状态，状态也未定义
【发布时间】：2021-10-03 05:56:27
【问题描述】：

我用初始值声明了一个名为product 的状态。但是，在加载新值之前，它会显示为未定义一次。当我想映射它的值时，这会导致问题。

import React, { useEffect, useState } from 'react';
import './App.css';
import { useQuery, gql } from "@apollo/client";
import { LOAD_PRODUCT } from "./GraphQL/Queries";

import Product from './Components/Product';

function App() {

    const { error, loading, data } = useQuery(LOAD_PRODUCT)
    const [product, setProduct] = useState<Product>({
      node: {
        id: 0,
        title: "Test"
      }
    })
    
    useEffect(() => {
         setProduct(data)
     }, [data])


    if(loading) return <h1>Loading...</h1>

    console.log(product)

  return (
    <>
    <Product product={product}/>
    </>
  );
}

export default App;

【问题讨论】：

由于是加载状态后才记录的，可能是数据的转换，与初始值无关。在加载状态之前记录应该没问题。请在沙箱中创建一个可重现的示例。 How to create a Minimal, Reproducible Example
而且你只是复制状态，应该有一些初始值API你可以传递给useQuery。

标签： javascript reactjs react-hooks use-state

【解决方案1】：

所以我假设data 在从您的数据库中获取之前是未定义的。因此loading 同时返回true。由于loading = true 在data 可用之前，您的组件将返回<h1>Loading...</h1>。因此没有到达您的console.log(product) .我怀疑如果你将console.log(product) 移动到if(loading) return <h1>Loading...</h1> 之前，你会得到你需要的结果。所以一开始它会打印出初始值，但是之后它会将初始值更改为未定义（使用setProduct），最后当获取数据时，它将setProduct 到data。让我知道这是否适合您，我在最后一点点玩了代码。

【讨论】：