状态未定义的变量 React.js

Question

I'm trying to store product from an API in the state of my React component and then map them in the render function of the component but somehow this.state.products is undefined .

This is my components code (CategoryProducts.js):

class CategoryProducts extends Component{
    constructor(props){
        super(props); 
        this.state = {}
        this.products = new Products(); 
    }

    async componentWillMount(){
        await this.products.getProductsInCategory(this.props.name).then(
            (val) => {
                this.setState({products: val}); 
            }
        )
    }

    render(){
        return(
            <Container className='content-container'> 
                <Row>
                    <Col md={12}>
                        <h4 className="mb-0">{this.props.name}</h4>
                        <hr></hr>
                    </Col>
                </Row>
                <Row>
                    <Col md={2}>
                        Some space for possible filters in the future 
                    </Col>
                    <Col md={10}>
                        {this.state.products.map(function(item, i){
                            console.log(i); 
                        })}
                    </Col>
                </Row>
            </Container>
        );
    }
}

The call to the API is async this is the corresponding code:

Products.js:

export class Products extends API {

    getProducts() {
        return this.get('/products')
    }
    getCategories(){
        return this.get('/products/categories'); 
    }
    getProductsInCategory(_category){
        return this.get('/products/withcategory/' + _category); 
    }
}

And this method inside the API class:

async get(_endpoint) {
        let response = await fetch(this.API_url + _endpoint);
        return response.json();
    }

I hope someone can help me out with this issue

Answer 1

The first time render() is called, the API call might not be ready yet. You need to take this into account in your render() function.

The easiest way is something like:

{this.state.products && this.state.products.map(function(item, i){
                        console.log(i); 
                    })}

This will only do the mapping when this.state.products has some value.

You could also show some loading component while the products are being loaded by adding something like this in your render() function.

{ !this.state.products && <SomeLoadingComponent /> }

Answer 2

You are turning the componentWillMount into a promise so that part won't be executed as such by RN:

 async componentWillMount(){
        await this.products.getProductsInCategory(this.props.name).then(
            (val) => {
                this.setState({products: val}); 
            }
        )
    }

Try this:

constructor(props){
        super(props); 
        this.state = {
            products: [] //Or whatever suits you best
         }
        this.products = new Products(); 
    }

 componentWillMount(){
        this.products.getProductsInCategory(this.props.name).then(
            (val) => {
                this.setState({products: val}); 
            }
        )
    }

Answer 3

componentWillMount() is invoked immediately before mounting occurs. It is called before render() , therefore calling setState() synchronously in this method will not trigger an extra rendering

You should avoid to place a API call in componentWillMount life cycle method.

Instead use,componentDidMount

async componentDidMount(){
        await this.products.getProductsInCategory(this.props.name).then(
            (val) => {
                this.setState({products: val}); 
            }
        )
    }

Answer 4

Define variable in

class CategoryProducts extends Component{
constructor(props){
    super(props); 
    this.state = {products : '';}
     
}
enter code here