.map() undefined 不是 React.js 中的函数

Question

是的，我可能在这里遗漏了明显的信息，但我收到了“未捕获的类型错误：未定义不是函数”我似乎是 .map() 这就是问题所在，但我不明白为什么。

var idealist = React.createClass({
loadCommentsFromServer: function() {
    $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data) {
            this.setState({data: data});
        }.bind(this)
    });
},
handleButtonClick: function(input) {
    // do stuff //
},
getInitialState: function() {
    return {data: []};
},
componentWillMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
    var clickFunction = this.handleButtonClick;
    var ideas = this.state.data.map(function(i){
        return <ideabox data={i} onButtonClick={clickFunction} />;
    });
    return (
        <div className="idealist">
            {ideas}
        </div>
        );
}
});

React.renderComponent(
<idealist  url="/json/quotes.php"  pollInterval={2000}/>,
document.getElementById('quoteList')
);

如果我将其更改为 var ideas = this.state.data 我没有收到任何错误，JSON 数据格式正确，有什么问题？

Answer 1

这是一个愚蠢的错误，quotes.php 没有返回格式正确的 JSON 数据，所以它不是一个数组 .map() 被调用。 吸取的教训？ 不要相信其他人说他们的代码有效！

Answer 2

.map()是一种使用提供的结果创建新数组的方法。

这是文档：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

您可以在这里做的是更改对象的.data属性以返回一个数组。 由于.map()仅适用于 Array 类型对象。

Answer 3

如果这对任何人有帮助，另一个容易忽视的错误是将变量初始化为空对象而不是状态中的空数组并调用 map()。

例如，在下面声明

const [list, setList] = useState({});

代替

const [list, setList] = useState([]);

并尝试在对象上调用 map()

list.map((item)=>{
    //do something
})

将导致“undefined is not a function near ... list.map(...” 在加载组件期间出现错误