TypeError：this.state.persons.map 不是函数

Posted 2023-02-26

【中文标题】TypeError：this.state.persons.map 不是函数

【英文标题】：TypeError: this.state.persons.map is not a function

【发布时间】：2018-08-08 00:04:30

【问题描述】：

我是 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: …

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

【问题讨论】：

这意味着您从服务器获取的数据不是数组，请检查console.log(res.data)，它应该是[]

LOCATION: "CHINA9, SWEDEN9, CANADA9, austin, ", searchKey: … --- 是 res.data 的输出。是否可以在上面的代码中访问这些位置，我的意思是我可以打印 CHINA9 等。

这是一个对象，它为什么会抛出错误，你想如何打印这些值，预期的输出？

我想将它们打印在卡片中，正如您在上面的代码中看到的那样......每个位置的卡片。实际上我正在从服务器返回一个 Map 。知道如何从 Spring Boot 返回 JSON，以便我可以在 React 中访问。

@dps 请检查更新的答案。这将在卡片标题中显示 LOCATION。

【参考方案1】：

您可以使用.split(',') 从LOCATION 字符串创建一个数组：

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

【讨论】：

我得到了输出，但它也打印了一张空白卡。我该如何摆脱它？供您参考 LOCATION: "CHINA9, SWEDEN9, CANADA9, austin, ", searchKey: …

我编辑了答案以处理空白结果，但您的服务器不应发送该结果。

【参考方案2】：

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

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

【讨论】：

op 的代码没有错误，唯一的问题是他从服务器获取的数据不是数组。 state= 是定义状态值的替代方式。在这种情况下也不需要prevstate :)

可能是异步 setState 的问题？

不，问题是res.data不是任何数组，他从服务器获取的数据，你也可以尝试a.map(el => el)，将a定义为[]以外的任何值，它会抛出同样的错误:)

yupp 数据可能不是数组

【参考方案3】：

首先确保您以

array

的形式从服务器获取数据，因为 map 仅适用于数组。 第二次更正您的代码结构。 render() let perons = this.state.perons; if (perons.length == 0) return ( <div><h3>Loading data...</h3></div> ) return ( <div class="ui stackable two column grid"> persons.map(person => return( <div class="column"> <Card header=person.LOCATION /> </div> ) ); </div> )

【讨论】：

实际上我正在从服务器返回一个 Map 。知道如何从 Spring Boot 返回 JSON 或您所说的“数组”，以便我可以在 React 中访问。

好吧，我没有使用 Spring Boot 框架，但您可以参考这些链接 https://***.com/questions/44839753/returning-json-object-as-response-in-spring-boot 和 https://***.com/questions/32905917/how-to-return-json-data-from-spring-controller-using-responsebody/35822500#35822500。希望对您有所帮助。

【参考方案4】：

您将this.state.persons 设置为res.data，这可能是一个对象。您不能在对象上使用map...

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

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

【讨论】：

那部分没有问题，this.setState( persons ) 是正确的方式，它只是一个数组。