「無法讀取未定義的」ReactJS和Lodash數組的屬性「映射」

我想將數組渲染到下面的JSX中，使用下面的代碼;「無法讀取未定義的」ReactJS和Lodash數組的屬性「映射」

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

我可以渲染出數組，但它重複每個數組的渲染函數。我只希望它輸出一個id等於1.當試圖實現Lodash _.find時，我可以使用這個渲染控制檯中的數組;

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

以下是我在執行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> 
} 
}

來源

2017-10-05 Clams Are Great

我不知道該錯誤的原因，我不能複製它，因爲我不能讓_.find()運行，但是你並不需要lodash：

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

編輯：檢查lodash文檔，錯誤的原因是_.find不返回一個數組/空數組，它返回一個Object/undefined。 lodash確實有一個_.filter方法，這可能會奏效。

來源

2017-10-05 09:28:38

謝謝克里斯，這工作完美。非常感激！ –

嘗試改變import lodash from "lodash"到import _ from "lodash"代碼。

來源

2017-10-05 08:50:11 223seneca

不幸的是，這並沒有解決這個問題，我仍然得到相同的錯誤。 –

我假設API調用是異步的。如果是這樣，頁面可能在數據返回之前呈現。首先，添加'this.EventGroup = this.EventGroup.bind（this）'構造函數。其次，嘗試在componentWillMount（）中調用'this.EventGroup（）'而不是'componentDidMount（）'。這是否工作？ – 223seneca

@ 223seneca拋開錯誤，'this.state.event'開始是'[]'，它應該可以完美地處理預期數組的渲染方法。這個問題與API調用異步無關。 –

這應該做的伎倆：

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(){ 
    if(this.state.loading){ 
     return <LoadingComponent /> 
    } 

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

Here is the fiddle.

來源

2017-10-05 09:43:56 Boky

「無法讀取未定義的」ReactJS和Lodash數組的屬性「映射」

回答

相關問題