“無法讀取未定義的屬性'map'” ReactJS和Lodash數組

Question

我正在嘗試使用以下方法將數組呈現到下面的JSX中；

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

我可以渲染數組，但是它會為每個數組重復渲染功能。 我只希望它輸出一個ID等於1的ID。當嘗試實現Lodash _.find時，我可以使用此方法在控制台中渲染該數組。

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

以下是我嘗試將Lodash實現到render方法中的嘗試，但是當我運行它時，出現以下錯誤；

未捕獲的TypeError：無法讀取未定義的屬性“ map”

以下是組件中的代碼

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

Answer 1

我不知道錯誤的原因，我無法復制它，因為我無法運行_.find() ，但是您不需要lodash：

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

編輯：我檢查了lodash文檔，錯誤的原因是_.find不返回數組/空數組，它返回了對象/未定義。 lodash確實具有_.filter方法，該方法可能會起作用。

Answer 2

這應該可以解決問題：

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

之所以Cannot read property 'map' of undefined是因為未獲取數據，而是嘗試對其進行映射。

您可以將loading標志設置為以下狀態：

this.state = {event: [], loading: true};

提取完成后在EventGroup函數中將其設置為false ：

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

然后在render方法中：

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

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

這是小提琴。

Answer 3

嘗試將import lodash from "lodash"更改為import _ from "lodash" 。