Javascript &引用；无法读取属性'；地图'；“未定义”的定义；ReactJS和Lodash数组

我正在尝试使用下面的代码将数组渲染到下面的JSX中

const events = this.state.event.map((item, i) => {

我可以渲染阵列，但它会对每个阵列重复渲染功能。我只希望它输出id等于1的那个。当尝试实现Lodash时，我发现我可以在控制台中使用以下命令渲染数组：

const firstArray = _.find(this.state.event, function(o) { return o.id == 1; });
console.log(firstArray);

下面是我在render方法中实现Lodash的尝试，但是当我运行它时，我得到了以下错误

未捕获类型错误：无法读取未定义的属性“映射”

下面是组件中的代码

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import $ from "jquery";
import lodash from "lodash";
import api from "../api.js";    

export default class EventRequest extends React.Component {
constructor(props) {
  super(props);

  this.state = {event: []};
}

componentDidMount() {
  this.EventGroup();
}
EventGroup() {

  return  $.getJSON(api.eventRequest).then((data) => {
    console.log(data);
    this.setState({ event: data.results });
  });
}

render() {
    const events = _.find(this.state.event, ['id', 1 ]).map((item, i) => {
    return <div>
    <div className="center-cards margin-top margin-bottom test-cardSecond">
      <div className="text-center margin-top">
        <h1 className="card-heading">Scottish Conference 2017</h1>
        <div className="card-sub">
          <div>{item.description}</div><br />
        </div>
      </div>
    </div>
      <div className="belowBoxTestSecond">
        <h1 className="bodyHeading">Example</h1>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. <br /><br />
        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. <br />
        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <br />
        Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <br /><br />
        Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
      </div>
    </div>
  });

  return <div id="" className="">
    <div>{ events }</div>
  </div>
}
}

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“jquery”导入$；
从“lodash”进口lodash；
从“./api.js”导入api；
导出默认类EventRequest扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={event:[]}；
}
componentDidMount（）{
this.EventGroup（）；
}
事件组（）{
返回$.getJSON（api.eventRequest）。然后（（数据）=>{
控制台日志（数据）；
this.setState（{event:data.results}）；
});
}
render（）{
const events=\.find（this.state.event，['id'，1]）.map（（item，i）=>{
返回
2017年苏格兰会议
{item.description}

例子
所有人都有一个明确的认识，那就是他们的生活必须要有明确的定义。


Nemo enim ipsam Voluptate是一个有价值的人，他是一个有价值的人，他是一个理性的人
最重要的一点是，在劳动和就业领域，所有人都有自己的权利、义务、义务和义务
但是，最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本
你是否应该在一个自由的世界里为自己的利益辩护？你是否应该在一个自由的世界里为自己的利益辩护

});
返回
{events}
}
}

尝试将

导入lodash从“lodash”

更改为

导入\uuu从“lodash”

我不知道错误的原因，我无法复制它，因为我无法运行

.find（）

，但是您不需要lodash：

const events = this.state.event.filter(e => e.id === 1).map(...);

---

编辑：我检查了lodash文档，出现错误的原因是

\uFind

不返回数组/空数组，它返回一个对象/未定义。lodash确实有一个

。
过滤方法，它可能会起作用。
这应该可以做到：

const events = this.state.data.filter(data => data.id === 1).map(item => <div>{item.name}</div>;

获取完成后，在
EventGroup
函数中将其设置为
false
：

this.setState({ event: data.results, loading: false });

然后在渲染方法中：

render(){
    if(this.state.loading){
         return <LoadingComponent />
    }

    // The rest of the code which will render if the data is fetched
}

render（）{
if（this.state.loading）{
返回
}
//如果提取数据，将呈现的其余代码
}

不幸的是，这并没有解决问题，我仍然收到相同的错误。我假设API调用是异步的。如果是这样，则页面很可能在返回数据之前呈现。首先，添加构造函数
this.EventGroup=this.EventGroup.bind（this）
。其次，尝试在
componentWillMount（）
内部调用
this.EventGroup（）
，而不是
componentDidMount（）
。这行得通吗？@223把错误放在一边，
this.state.event
一开始是
[]
，对于需要数组的渲染方法，这应该可以很好地工作。这个问题与API调用是异步的无关。谢谢Chris，这很好地工作了。非常感谢！
render(){
    if(this.state.loading){
         return <LoadingComponent />
    }

    // The rest of the code which will render if the data is fetched
}