Reactjs - this.state.data.map 参数未定义答案

【问题标题】：Reactjs - this.state.data.map arguments is UNDEFINEDReactjs - this.state.data.map 参数未定义
【发布时间】：2018-08-06 06:16:04
【问题描述】：

我一直试图从我的 api 中获取数据，但不知何故，this.state.Data.map 确实有效，但参数 dynamicdata 未定义。

在App.js 反应

class ShowAll extends Component {
    constructor(props){
      super(props);
      this.state = {
        Data: [],
      }
    }

    componentDidMount(){
          Request.get('/budget').then((res)=>{
            let DataString = JSON.stringify(res.body);
            this.setState({
              Data: DataString
            }, function(){
              console.log(DataString);
            })
          }).catch((err)=> console.log(err));
    }

    render(){
      return(
        <div>
          {
            this.state.Data.map(function(dynamicData, key){
              <div>{dynamicData[0]._id}</div>  // doesn't render anything and throws an error message saying TypeError: Cannot read property '_id' of undefined

            })
          }
          </div>
      )
    }
  }

**编辑 1 **

api数据结构是

 [{
    "_id":"lul",
    "_creator":"5a8f8ecdd67afa6494805bef",
    "firstItem":"hero",
    "secondItem":"30",
    "thirdItem":"3",
    "__v":0,
    "tBudget":9,
    "thirdPrice":3,
    "secondPrice":3,
    "firstPrice":3
    }]

【问题讨论】：

您的服务器返回了什么？也许res.body 不是可迭代对象？不知道res.body的值很难猜到
res.body 确实返回了我想要的数据。我使用console.log() 进行了检查。一切都很好，但我无法访问对象的特定项目。检查后编辑的结构 api 中的每个对象都有这个结构。我正在尝试访问 _id 或其中的任何内容
总的来说，问题似乎出在 api 的响应上。 Array.from 期望一个类似数组或可迭代的对象。检查here
您能否提供从 API 调用中获取的数据的结构
第一个问题是map 内的数据形状假设（数组项内没有[0] 属性），这就是引发无法读取属性错误的原因。修复此问题后，您需要从 map 返回 jsx 元素，并在此 jsx 元素上包含 key 属性。阅读特殊属性keyhere

标签： node.js reactjs api

【解决方案1】：

根据服务器响应，渲染每一项时不需要访问item 0

class ShowAll extends Component {
    constructor(props){
      super(props);
      this.state = {
        Data: [],
      }
    }

    componentDidMount(){
          Request.get('/budget').then((res)=>{

            this.setState({
              Data: res.body, // Assuming res.body is already an array
            }, function(){
              console.log(DataString);
            })
          }).catch((err)=> console.log(err));
    }

    render(){
      return(
        <div>
          {
            this.state.Data.map((dynamicData, key) => // Using an arrow function
              <div>{dynamicData._id}</div>  // Don't access the item 0
            )
          }
          </div>
      )
    }
  }

前面的代码假定res.body 已经是一个数组。如果情况并非如此，并且您实际上得到的是字符串或其他内容，则需要解析响应并确保将数组分配给状态。

【讨论】：

谢谢。 res.body 是一个对象。这就是为什么我在做任何事情之前对其进行了转换。在<div>{dynamicData._id}</div> 之前添加返回后它现在可以工作了
当使用箭头函数（只有一个语句）时，您不需要添加 return，因为默认情况下它会返回表达式的结果，在这种情况下是 JSX 元素;)
信不信由你，没有回报就行不通。这就是这里的主要问题，因为除了返回之外一切都是正确的。我现在将其删除以尝试，但它没有像以前那样工作。无论如何，谢谢。

【解决方案2】：

哦。您原来的帖子是一个完全不同的问题。

两个问题。第一：

你正在映射，所以你不需要索引映射的值

this.state.Data.map(function(dynamicData, n) {
  // dynamicData _is_ the nth element in the array, you don't need dynamicData[x]
  dynamicData._id === "lul"
})

其次，您不会从地图回调中返回任何内容

map(function(...) {
  return (<div>...</div>)
})

【讨论】：

非常感谢 :) 我有点难过，我自己没有弄清楚退货的事情。
另外请记住，您需要为映射函数返回的每个 jsx 元素添加一个唯一的 key 属性。阅读更多关于关键道具here