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

Question

成为React社区的新手......我被阻止（现在几个小时），无法找到修复上述错误的解决方案：

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

这是我的ajax数据响应

该错误存在于 const ListContainer

内的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的回调会访问该值，然后将其丢弃。

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的对象，但此文件中的所有代码都使用{{1}这不存在。