TypeError: books.map не является функцией в реакции

Question

import React from 'react';

export class Books extends React.Component {
state = {
    loading: true,
    books: []
}

componentDidMount() {

    fetch('**url**')
        .then(res => res.json())
        .then((data) => {
            this.setState({ books: data })
        })
        .catch(console.log)
  }
 render() {

    const { books } = this.state;
    console.log("this.state contains:", this.state);

/ * this.state содержит: {loading: true, books: status: 'success', data: (10) [{id: 1, name: xyz, ..}, {} ..] * /

    const b = books.data;
    return (
        <div>
            {b.map((k) => (
                <h1>{k.name}</h1>
            ))}

        </div >
    );

}

}

Я хочу отобразить все значения (например: id: 1, name: xyz, id: 2, name: xxx) С 1 недели я ' Я пытаюсь это исправить. Но не смог. Получение карты не является функцией. Пожалуйста, помогите мне решить эту проблему.

Answer 1

попробуйте следующее:

let b = books.data || [];

, так как вы получаете данные в componentDidMount, есть большая вероятность, что он не получит результат, когда вы хотите отрендерить.

Answer 2

Попробуйте создать условие, чтобы проверить, является ли b массивом или нет! как это:

const b = books.data;
return (
    <div>
        {
         if(Array.isArray(b)){
        b.map((k) => (
            <h1>{k.name}</h1>
        ))
           }
            }

    </div >
);

}

Answer 3

Объект books в состоянии изначально пуст, поэтому books.data не существует и, следовательно, books.data.map не является функцией. Как и условный рендер

    const {data} = this.state.books
    <div>
        {data && data.map((k) => (<h1>{k.name}</h1>))}

    </div >