Question

你好，我在获取值并在反应中设置状态时遇到问题我可以在API响应的控制台中看到数据，一切正常。

export default class index extends Component {
    constructor(props){
        super(props)
            this.state={ products: [], filteredProducts:[]}
    }
    componentDidMount(){
         api.get('/products').then( result => this.setState({
            products: result.data.listProducts,
            filteredProducts: result.data.listProducts
        }))
        console.log(this.state.products)
    }

但是当我控制状态值时，它会显示一个空数组

index.js:16 [] console.log(this.state
index.js:11 (5) [{…}, {…}, {…}, {…}, {…}] console.log( data request

好吧，我不知道我的后端是否有问题

我制作了一张地图以过滤要返回到前端的内容，因为我有 3个对象的数组我不知道我是否做出了最佳选择，或者我是否可以做得更好，如果我可以改进代码，如果有人可以警告我，我会很高兴：

  async getAllProduct(req,res){
        try {
            const results = await Products.findAll({
                // raw: true, <= remove
                attributes:['id','name', 'float', 'price'],
                include: [{
                    model: SubCategory,
                    as: 'subcategory',
                    attributes: ['id','name'],
                },
                {
                    model:Exteriors,
                    as: 'exteriors',
                    attributes: ['id','name']
                },
                {
                    model:Types,
                    as: 'types',
                    attributes: ['id','name']
                },
            ],
            })
            const listProducts = []
            results.map(record =>
                record.get({ plain: true }));

            results.map( (products) => {
                const model = {
                    id: products.id,
                    name: products.name,
                    float: products.float,
                    price: products.price,
                    id_sub: products.subcategory.id,
                    subcategory: products.subcategory.name,
                    id_types: products.types.id,
                    type: products.types.name,
                    id_ext: products.exteriors.id,
                    exterior: products.exteriors.name,
                }
                listProducts.push(model);
            })
            if(listProducts){return res.status(200).json({listProducts})}
            else{return res.status(400).json({result: 'failed to get Products'})}
         } catch (error) {
             console.error(error);
         }
    }

Answer 1

如果在状态更新后立即console.log，您将记录旧状态。尝试在componentDidUpdate中记录状态以查看状态是否为空：

componentDidUpdate() {
   console.log(this.state)
}

Answer 2

setState是异步的，设置状态后您就看不到更新的状态，

您可以在setState中进行回调以检查更新后的状态，

this.setState({
    products: result.data.listProducts,
    filteredProducts: result.data.listProducts
}, () => console.log(this.state.products)) //callback method

反应js请求结果

2 个答案: