react js组件的状态为null答案

【问题标题】：react js component gets state as nullreact js组件的状态为null
【发布时间】：2020-03-27 16:26:13
【问题描述】：

尝试将状态作为参数传递给组件时出错

我已经给了 console.log 并且我的状态正在从 api 得到响应

import React, { Component } from 'react';
import api from '../../services/api';
import Products from '../Products';
export default class index extends Component {
    constructor(props){
        super(props)
            this.state={ products: [], filteredProducts:[]}

    }
    componentWillMount(){
         api.get('/products').then( result => this.setState({
            products: result.data.listProducts,
            filteredProducts: result.data.listProducts
        }))
    }
    render() {
        return (
            <>
            <Products products={this.state.filteredProducts} handleAddToCart={this.handleAddToCart}/>
            </>
        )
    }
}

我的状态以 null 开始，使用 api 后它正确返回，但传递给我的组件的状态为 null 我的控制台 .log 响应

[]

(5) [{…}, {…}, {…}, {…}, {…}]

错误：

TypeError: Cannot read property 'map' of undefined
const productItems = this.props.productItems.map( product => (

和我的组件产品：

import React, { Component } from 'react'
import util from '../utils';
export default class Products extends Component {
    render() {
        console.log(this.props);
        const productItems = this.props.productItems.map( product => (
            <div className="col-md-4">
            <div className = "thumbnail text-center"> 
            <a href={`#${product.id}`}  onClick={(e)=>this.props.handleAddToCard(e,product)}>
                <p>
                    {productItems.name}
                </p>
            </a>
            </div>
                <b>{util.formatCurrency(product.price)}</b>
                <button className="btn btn-primary" onClick={(e)=>this.props.handleAddToCard(e,product)}>Add to Cart</button>
            </div>
        )
        )
        return (
            <div className="row">
                {productItems}
            </div>
        )
    }
}

【问题讨论】：

它应该是this.props.products.map(product => (...))，因为这是你在父组件上命名道具的方式
我已经试过了，但是我的道具是空的。
即使使用我的 api 我的状态也是初始状态

标签： reactjs

【解决方案1】：

您需要将副作用移动到componentDidMount 并等待组件被挂载，然后进行异步调用并刷新。同时，您需要有一个if 以防止在状态为空时加载子组件。所以我会把你的代码改成这个。

import React, { Component } from 'react';
import api from '../../services/api';
import Products from '../Products';
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
        }))
    }
    render() {
        return (
            <>
             {this.state.ffilteredProducts.length > 0
             ?  <Products products={this.state.filteredProducts} handleAddToCart={this.handleAddToCart}/>
             : null

                }

            </>
        )
    }
}

或者您可以使用spinner 而不是 null

【讨论】：

非常感谢兄弟