Я новичок в React. Я сталкиваюсь с этой ошибкой. У меня есть код, который вставлен ниже. Пожалуйста, помогите выйти из этой ошибки.

import React from 'react';
import { Card} from 'semantic-ui-react';
import axios from 'axios';

export default class PersonList extends React.Component {
state = {
    persons: []
}

componentDidMount() {

axios.get(`http://localhost:8080/locations`)
  .then(res => {
    const persons = res.data;
    this.setState({ persons });
  })
}

render() {
   return (
    <div class="ui stackable two column grid">
     { this.state.persons.map(person =>  
       <div class="column">
        <Card
          header={person.LOCATION}
        />
      </div>)
     }
    </div>
   )
 }
}

Сообщение об ошибке вставлено ниже

TypeError: this.state.persons.map is not a function
PersonList.render
C:/Users/user/Desktop/src/Sample.js:22
19 | render() {
20 |   return (
21 |       <div class="ui stackable two column grid">
> 22 |        { this.state.persons.map(person =>  
23 |          <div class="column">

Вывод console.log('data', res.data):

{LOCATION: "CHINA9, SWEDEN9, CANADA9, austin, ", searchKey: {…}}

Я прошу кого-нибудь выяснить мне эту ошибку.

1
kingkong 28 Фев 2018 в 10:19

3 ответа

Лучший ответ

Вы можете создать массив из строки LOCATION, используя .split(','):

function render() {
  const locationArr = this.state.persons.LOCATION
    ? this.state.persons.LOCATION.split(',')
    : [];
  return (
    <div className="ui stackable two column grid">
      {locationArr.map((location) => {
        if (location !== ' ') {
          return (
            <div className="column">
              <Card header={location} />
            </div>
          );
        }
        return null;
      })}
    </div>
  );
}
2
Dyo 28 Фев 2018 в 09:28

Вы устанавливаете this.state.persons в res.data, который, вероятно, является объектом .. вы не можете использовать map для объекта ...

Вместо этого вы, возможно, захотите поместить объект в массив объектов. нравится:

let persons = this.state.persons.slice()
persons.push(res.data)    
this.setState({persons})
0
Egor Egorov 28 Фев 2018 в 07:46

Создать конструктор и объявить свое состояние

constructor(props){
     super(props);
     state = {
        persons: ""
     }
   }

Изменить состояние обновления на

axios.get(`http://localhost:8080/locations`)
  .then(res => {
    this.setState((prevState) => ({ persons : res.data.LOCATION }));
  })
}

Метод рендеринга

this.state.persons.split(",").map((person, index) => (
    <div class="column" key={index}>
        <Card
          header={person}
        />
      </div>
))
0
Javed Shaikh 28 Фев 2018 в 08:45