从获取结果中的数组中获取值（React.js）

Question

I need to acess a name that is inside the array area_set that is inside a result from an API fetch. I try multiple ways but is says or that map is undefined or something else.

Here's the imagem of the json response:

Here's my code to ask for the json:

componentDidMount() {
    fetch(url + '/couch-model/1/', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'Authorization': 'JWT ' + (JSON.parse(localStorage.getItem('token')).token)
        }
    }).then(res => {
        if (res.ok) {
            return res.json();
        } else {
            throw Error(res.statusText);
        }
    }).then(json => {
        this.setState({
            model: json
        }, () => {
            console.log('model: ', json);
        });
    })
}

Here's the code inside render method:

 render() {

    const { model, isLoaded } = this.state;

    if (!isLoaded) {

        return (
            <div id="LoadText">
                Estamos a preparar o seu sofá!
            </div>
        )

    } else {

        return (
                    <div id="Esquerda">
                        <h2>
                            {model.area_set.map(area =>
                                model.area.area_set[0].name
                            )}
                        </h2>

                        <h1>{model.name}</h1>
                        <p>Highly durable full-grain leather which is soft and has  a natural look and feel.</p>

                        <h3>Design</h3>
                        <h4>Hexagon</h4>
                    </div>
        );

    }

}

I'm really stuck in this, anybody can help?

Answer 1

getMeSomething = () => {
    if(this.state.model.area_set)
        return this.state.model.area_set.map(area => area.name)
}


render() {
    const { model, isLoaded } = this.state;
    if (!isLoaded) {
        return (
            <div id="LoadText">
                Estamos a preparar o seu sofá!
            </div>
        )
    } else {
        return (
                    <div id="Esquerda">
                        <h2>
                            {this.getMeSomething()}
                        </h2>
                        <h1>{model.name}</h1>
                        <p>Highly durable full-grain leather which is soft and has  a natural look and feel.</p>
                        <h3>Design</h3>
                        <h4>Hexagon</h4>
                    </div>
        );
    }
}

Please try this way. In your case state doesnot have area_set defined in it so there is a high chance of not finding some instant. So it want you to handle that error

Answer 2

{model.area_set.map(area =>
    model.area.area_set[0].name
)}

This part looks weird. Try this instead:

{model.area_set.map(area =>
    area.name // This will yeild the name you are looking for once since the array is length = 1
)}