Блог

Главная - Вопросы по программированию - это.состояние.категория.карта не является функцией ReactJS

это.состояние.категория.карта не является функцией ReactJS

#reactjs #function #frontend

Вопрос:

у меня есть много категорий в компоненте, и я хочу отобразить одну конкретную категорию в другом компоненте, используя его идентификатор . я использую axios и получаю данные, которые ищу, как показано на рисунке

введите описание изображения здесь

но проблема в том, что когда я хочу использовать карту для отображения данных, я получаю следующую ошибку : this.state.category.map не является функцией

вот мой код :

  import React, { Component } from 'react';
import axios from 'axios';

class SingleCategory extends Component {
    constructor(props) {
        super(props);
        this.state={
            category:[]
        }
    }
    componentDidMount() {
        axios.get('http://127.0.0.1:8000/api/show/' this.props.match.params.id)
        .then(response=>{
            this.setState({category:response.data});
            console.log(this.state.category)
        })
    }
    render() {
        return (
            <div className="w-2/3 bg-red-100 h-60 m-auto mt-10">
                    {
                        this.state.category.map(cat=> {
                            return(
                                <div>{cat.id}</div>
                            )
                        })
                    }
            </div>
        );
    }
}
export default SingleCategory;

Комментарии:

1. Пожалуйста, добавьте результат console.log(response.data)

2. Кроме того, я не думаю console.log(this.state.category) , что у вас будет правильное время, он должен ждать реакции, чтобы отметить изменение состояния.

3. Зарегистрированные данные показывают обычный объект, а не массив.

4. @Chaker.asm да, но у простых объектов нет .map метода. Так что вместо this.state.category.map этого вам, вероятно, следует просто напрямую использовать <div>{this.state.category.id}</div>

5. @GabrielePetrioli Да , это отлично работает, спасибо, приятель !

Ответ №1:

Таким образом, проблема заключалась в том, что простые объекты не имеют метода .map. Вместо того, чтобы использовать эту карту.состояние.категория.. просто напрямую используйте

 <div>{this.state.category.id}</div>

Ответ №2:

Согласно вашему комментарию, результатом API является объект, а не объект array . Поэтому map не могу вызывать Объекты.

Ответ №3:

В соответствии с примером объекта resp.data, похоже, что вы получаете объект не в списке из api. Карта работает только со списком.

Метки: