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

Question

Так что я работаю с reactjs, но я довольно новичок в reactjs, когда я хочу вызвать свой API с помощью componentdidMount, эта ошибка постоянно показывает TypeError: Events.map не является функцией, может кто-то помочь мне

class Rank extends Component {
constructor(props){
    super(props);
   this.state = {Events: {}, golfer_events: [] }

}

componentDidMount(){
    fetch('http://localhost/Golfer/api/EventApi/rank?id=2')
    .then(response =>{
            return response.json()   
    })
    .then(json => console.log("json:", json))
    .then(json => this.setState({Events: json.conversation}))

}


render() {
    const {Events} = this.state;
        return (
            <div>
                {
                    Events.map(event =>{
                        const {id, title, golfer} = event;
                        return(
                            <div key ={id}>
                                <Card>
                                    <CardBody>
                                        {title}
                                        {golfer}
                                    </CardBody>
                                </Card>
                            </div>
                            )
                    })
                }
            </div>
        );
    }
}

Answer 1

Вы можете использовать функцию map () только для массивов, а не для объекта. array.map () - это синтаксис. componentDidMount вернет массив, затем исправит конструктор, так как другие ответы также упоминают, что

constructor(props){
    super(props);
   this.state = {Events: [], golfer_events: [] }

}

componentDidMount(){
    fetch('http://localhost/Golfer/api/EventApi/rank?id=2')
    .then(response =>{
            return response.json()   
    })
    .then(json => console.log("json:", json))
    .then(json => this.setState({Events: (json.conversation || [])}))

}

Answer 2

Вы делаете итерацию на объекте, используя карту. карта работает только с массивом типов. попробуйте выполнить следующее.

this.state = {Events: [], golfer_events: [] }

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

componentDidMount(){
fetch('http://localhost/Golfer/api/EventApi/rank?id=2')
.then(response =>{
        return response.json()   
})
.then(json => console.log("json:", json))
.then(json => this.setState({Events: json.conversation // this value need to be type of array to use map}))

}

Answer 3

В конструкторе вы устанавливаете События как объект вместо массива. Объект не имеет функции карты, вызывающей проблему.

 constructor(props){
        super(props);
       this.state = {Events: [] = [], golfer_events: [] = [] }

    }

componentDidMount(){
    fetch('http://localhost/Golfer/api/EventApi/rank?id=2')
    .then(response =>{
            return response.json()   
    })
    .then(json => console.log("json:", json))
    .then(json => this.setState({Events: (json.conversation || [])}))

}

Answer 4

Вам нужно конвертировать Events в массив, чтобы вы могли использовать map ()