React.DOM：処理されない拒否（TypeError）：未定義のプロパティ 'map'を読み取ることができません

Question

Reactコミュニティの初心者です...今は数時間ブロックされており、エラーを解決するソリューションをトレースできません上に掲示されました：

私は、アプリケーションを通してデータオブジェクトがどのように取り込まれるかに関する正しいパラメータがありませんか？

これは私のAjaxデータ応答

バグはここにファイル全体のコードですコンテキストについてListContainer

のconstの内側props.personList.mapに住んでいるである：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import axios from 'axios'; 

function getPersonList() { 
    const api = 'apistring'; 
    return axios.get(api).then(res => { 
     console.log(res); 
    }).catch(err => console.log(err)); 
} 

let getLastName = (fullName) => { 
    return fullName.match(/\w+/g)[1]; 
}; 

const getFirstName = (fullName) => { 
    return fullName.match(/\w+/g)[0]; 
}; 

//Remove any people that do not have the name we are searching for 
let filterByName = (searchForName, personList) => { 
    return personList.filter((person) => { 
     return person.name === searchForName; 
    }); 
}; 

//VIEW (React) 
const Search = ({ onChange }) => React.DOM.input({ 
    type: 'input', 
    onChange 
}); 

const Thumbnail = ({src}) => React.DOM.img({ 
    className: 'image', 
    src 
}); 

//CODE BREAKS HERE 
const ListRow = (props) => React.DOM.tr({ key: props.person.name }, [ 
    React.DOM.td({ key: 'headshot' }, React.createElement(Thumbnail, { src: props.person.url })), 
    React.DOM.td({ key: 'firstName' }, null, getFirstName(props.person.name)), 
    React.DOM.td({ key: 'lastName' }, null, getLastName(props.person.name)), 
]); 

const ListContainer = (props) => React.DOM.table({ className: 'list-container' }, [ 
    React.DOM.thead({ key: 'firstName' }, React.DOM.tr({}, [ 
     React.DOM.th({ key: 'lastName' }, null, 'headshot'), 
     React.DOM.th({ key: 'id' }, null, 'First Name'), 
     React.DOM.th({ key: 'last-h' }, null, 'Last Name') 
    ])), 
    React.DOM.tbody({ key: 'tbody' }, props.personList.map((person, i) => 
     React.createElement(ListRow, { key: `person-${i}`, person }))) 
]); 

const App = React.createClass({ 
    getInitialState() { 
     return { 
      personList: [], 
      visiblePersonList: [] 
     }; 
    }, 
    componentDidMount() { 
     getPersonList().then((data) => 
      this.setState({ 
       data, 
       visiblePersonList: data 
      })); 

    }, 
    _shuffleList() { 
     this.setState({ 
      visiblePersonList: shuffleList(this.state.personList) 
     }); 
    }, 
    _sortByFirst() { 
     this.setState({ 
      visiblePersonList: sortByFirstName(this.state.personList) 
     }); 
    }, 
    _sortByLast() { 
     this.setState({ 
      visiblePersonList: sortByLastName(this.state.personList) 
     }); 
    }, 
    _onSearch(e) { 
     this.setState({ 
      visiblePersonList: filterByName(e.target.value, this.state.personList) 
     }); 
    }, 
    render() { 
     const { visiblePersonList } = this.state; 
     return React.DOM.div({ className: 'app-container' }, [ 
      React.createElement(Search, { key: 'search', onChange: this._onSearch }), 
      React.DOM.button({ key: 'shuffle', onClick: this._shuffleList }, null, 'Shuffle'), 
      React.DOM.button({ key: 'sort-first', onClick: this._sortByFirst }, null, 'Sort (First Name)'), 
      React.DOM.button({ key: 'sort-last', onClick: this._sortByLast }, null, 'Sort (Last Name)'), 
      React.createElement(ListContainer, { key: 'list', personList: visiblePersonList }) 
     ]); 
    } 
}); 

ReactDOM.render(<App />, document.getElementById('app')); 

Answer 1

を

console.logでコールバックすると値にアクセスして破棄します。あなたはあなたの約束チェーンにリンクを挿入する.then使用する場合

function getPersonList() { 
    const api = 'apistring'; 
    return axios.get(api).then(res => { 
     console.log(res); 
    }).catch(err => console.log(err)); 
} 

は

function getPersonList() { 
    const api = 'apistring'; 
    return axios.get(api).then(res => { 
     console.log(res); 
     return res.data.items; 
    }).catch(err => console.log(err)); 
} 

でなければなりません。 .thenによって返される値は、次のハンドラに渡される値になります。あなたが任意の値を返すされていませんので、ご

getPersonList().then((data) => { 
    // ... 
}); 

コールバックはundefinedとしてdataを取得します。

この特定のエラーは発生しませんが、スクリーンショットには.firstNameと.lastNameのオブジェクトが表示されますが、このファイルのコードはすべて、.nameが存在しません。