Question

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

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

Answer 1

当响应处于待处理状态时，您可以使用默认值data。在这个时间data未定义

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

或者在jsx中使用条件：

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

Answer 2

看起来您的回答只是原始回复。如果你正在使用fetch，那么这就是promise链的样子：

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

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

Answer 3

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

.sPage{
  margin-top: 5px;
  margin-left: 25px; 
}

Answer 4

必须更改父组件更改：

  this.setState({
    data: response
  })

到

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

我已尝试从子组件中获取数据，但它无法正常工作（可能是因为地图功能）

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

4 个答案: