反应中的映射函数（错误：TypeError：e.map不是函数）答案

【问题标题】：Map function in react (err: TypeError: e.map is not a function)反应中的映射函数（错误：TypeError：e.map不是函数）
【发布时间】：2018-01-28 22:47:23
【问题描述】：

我想从道具渲染项目，我可以用初始状态来做，但不能用来自服务器的响应。我的渲染功能：

 const { data } = this.props;
    return (
      <div >
          {data.map((item, index) =>
              <div key={index} className="row">
                  <span data = { data } className="number col-4 col-md-8">{item._id}</span>
                  <span data = { data } className="date col-4 col-md-2">{item.date}</span>
                  <span data = { data }  className="tag col-4 col-md-2">{item.tag}</span>
                  <div className="col-md-12 ">
                    {item.text}
                  </div>                
              </div>
          )}
      </div>
    )
  }

我犯了这个错误：

TypeError: e.map 不是函数

response : Object {data: Array(12), status: 200, statusText: "OK", headers: Object, config: Object...}

【问题讨论】：

你在哪里调用服务器？ e.map 在你的代码中在哪里？
您能否展示如何从响应中更新您的数据道具？看起来数据变得未定义，所以我认为您正在覆盖某些内容，但在看到代码之前我无法判断。

标签： javascript arrays reactjs object map-function

【解决方案1】：

当响应等待处理时，您可以使用默认值data。此时data没有定义

const { data = [] } = this.props;

或者在 jsx 中使用条件：

render() {
   if (!data || !data.length) return null;
   ...
}

【讨论】：

【解决方案2】：

您的回复似乎只是原始回复。如果您使用的是 fetch，那么 Promise 链应该是这样的：

fetch(fromMySource).then(resp => resp.json()).then(data => doSomething(data));

看起来您可能正在尝试直接使用 resp，这会使您的数据数组看起来像您在问题中发布的响应对象。

【讨论】：

【解决方案3】：

只需将这些词添加到您的地图功能中，因为你需要检查数组是否存在然后执行map函数

const { data } = this.props;
    return (
      <div >
          {data && data.length && data.map((item, index) =>
              <div key={index} className="row">
                  <span data = { data } className="number col-4 col-md-8">{item._id}</span>
                  <span data = { data } className="date col-4 col-md-2">{item.date}</span>
                  <span data = { data }  className="tag col-4 col-md-2">{item.tag}</span>
                  <div className="col-md-12 ">
                    {item.text}
                  </div>                
              </div>
          )}
      </div>
    )
  }

【讨论】：

看起来它在响应尚不存在时呈现，并且在之后不会重新呈现..

【解决方案4】：

不得不改变父组件改变这个：

  this.setState({
    data: response
  })

到

  this.setState({
    data: response.data
  })

我试图从子组件中获取数据，但它不起作用（可能是因为 map 功能）

【讨论】：