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

Question

我用初始值声明了一个名为 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;

Answer 1

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

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

State undefined even with initial state in React

javascript

reactjs

react-hooks

use-state