React.DOM：未处理的拒绝（TypeError）：无法读取未定义的属性“地图”

Question

作为React社区的新手......我被阻止（现在几个小时），无法追踪解决方案来修复错误张贴以上：

我错过了正确的参数，如何通过应用程序获取数据对象？

这是我的ajax数据响应

该错误是生活在props.personList.map常量的内部ListContainer

对于方面这里是整个文件的代码：

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的回拨访问该值，然后丢弃该值。

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要插入一个链接到你的诺言链。由.then返回的值成为传递给下一个处理程序的值。因为你不返回任何值，你

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

回调将得到data为undefined。

另外一点需要注意，虽然不会导致此特定错误，那是你的截图显示了.firstName和.lastName，但都在这个文件中的代码使用.name不存在的对象。