Reactjs TypeError:this.state.persons.map不是函数

我是新的反应。我面临着这个错误。我有下面粘贴的代码。请帮助摆脱这个错误

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>
   )
 }
}

---

我请求任何人找出这个错误。

创建构造函数并声明您的状态

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>
   )
 }
}

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>
))

this.state.persons.split（“，”）.map（（person，index）=>(
))

您将

this.state.persons

设置为

res.data

，这可能是一个对象。。您不能在对象上使用

map

相反，您可能希望将对象推送到对象数组中。像这样：

let persons = this.state.persons.slice()
persons.push(res.data)    
this.setState({persons})

• 首先，请确保您正在以数组的形式从服务器获取数据，因为map只在数组上工作
• 其次，稍微修改一下代码结构。

  
  render（）{
  让{
  贝隆
  }=this.state.perons；
  如果（perons.length==0）{
  返回(
  正在加载数据。。。
  )
  }
  返回(
  {persons.map（person=>{
  返回（
  
  )
  });
  }
  )
  }

---

您可以使用

.split（'，'）

从

位置创建数组：

function render（）{
const locationArr=this.state.persons.LOCATION
？this.state.persons.LOCATION.split（“，”）
: [];
返回(
{locationArr.map（（位置）=>{
如果（位置！=''）{
返回(
);
}
返回null；
})}
);
}
这意味着您从服务器获取的数据不是数组，请通过
控制台.log（res.data）
检查它是否应该是
[]
{LOCATION:“CHINA9、SWEDEN9、CANADA9、austin”，搜索键：{…}--是res.data的输出。我的意思是，我是否能够打印CHINA9等。这是一个对象，它为什么会抛出错误，你想如何打印这些值，预期输出？我想在卡片中打印它们，正如你在上述代码中看到的那样…每个位置都有一张卡片。实际上，我正在从服务器返回地图。知道如何从Spring Boot返回JSON以便我可以在React中访问这里吗。@dps plz检查更新的答案。这将显示卡头中的位置。op的代码没有错误，唯一的问题是他从服务器获取的数据不是数组
state={}
是定义状态值的另一种方法。另外，在这种情况下，
prevstate
不是必需的：）可能是异步设置状态的问题？不，问题是
res.data
不是任何数组，他从服务器获取的数据，您也可以尝试
a.map（el=>el）
，将a定义为
[]以外的任何值
它将抛出相同的错误：）yupp数据可能不是数组该部分没有问题，
this.setState（{persons}）
是正确的方法，它将只保留一个数组。实际上，我正在从服务器返回一个映射。你知道如何从Spring Boot返回JSON或如你所说的“array”，以便我可以在React中访问这里吗？我没有使用Spring Boot框架，但你可以参考这些链接和。希望这会有帮助。我得到了输出，但它也打印了一张空白卡。我该如何处理它？对于您的引用{位置：“Chana9，SuffDN9，ChanaDa9，奥斯丁”，SalkKe: {…}}我编辑了我的答案来处理空白结果，但是您的服务器不应该发送。
let persons = this.state.persons.slice()
persons.push(res.data)    
this.setState({persons})

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>
  );
}