为什么我的状态没有在基于 class 的组件中设置，它应该可以工作，但我也没有收到错误

Question

我面临的问题是我无法在基于 class 的组件中设置我的状态我不知道它有什么问题我之前创建了一个非常小的项目 this这样我就可以练习状态操作并且我正在做与测试项目工作相同的方式请帮助

import React, { Component } from 'react';
import { Header } from './components';
import { ProductListing, ProductDetail, Cart } from './Screens';

import {
    Routes,
    Route,
    Navigate
} from "react-router-dom";

export class App extends Component {
    constructor(){
        super();
        this.state = {
            products: [],
            cart: []
        }
    }

    async componentDidMount() {
        const query = `
    query{
      categories {
          name
          products {
            id,
            name,
            inStock,
            gallery,
            category
          }
        }
  }
    `;
        fetch("http://localhost:4000", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json",
            },
            body: JSON.stringify({
                query
            })
        }).then(response => {
            return response.json();
        }).then(data => {
            this.setState({
                products: data.data.categories,
            })
            console.log("The data i am getting is", data.data.categories);
            
        })
        console.log("The prodcuts are", this.state.products)
    }
    render() {
        return (
            <>
                <Header />
                <Routes>
                    <Route path="/" element={<Navigate replace to="/all" />} />
                    <Route path="/:category" element={<ProductListing products={this.state.products} />} />
                    <Route path="/product" element={<ProductDetail />} />
                    <Route path="/cart" element={<Cart />} />
                </Routes>
            </>
        )
    }
}

export default App

我不明白为什么这段代码不起作用，它应该设置数据并将其发送到组件，但实际上并没有这样做，也没有给出错误

this.setState({
             products: data.data.categories,
         })

下面的一段代码

console.log("The data i am getting is", data.data.categories);

Answer 1

this.setState是一个异步函数
console.log("The prodcuts are", this.state.products) 是一个同步代码
所以它没有打印出正确的结果
可以在this.setState
的回调函数中打印数据像这样

this.setState({...}, () => {
  console.log(...)
})

你应该能得到正确的结果
在 ProductListing 组件中
我不确定你什么时候打印 console.log
因为你的数据是异步请求的，你得到
并且子组件的渲染不一定在request
之后完成所以如果你想成功打印子组件的数据
在更新生命周期
或者在渲染函数中
希望这对你有所帮助

为什么我的状态没有在基于 class 的组件中设置，它应该可以工作，但我也没有收到错误

Why my state is not getting set inside class based component and it should work but it is not neither i am getting error

javascript

reactjs

react-class-based-component