Question

是的，我可能在这里错过了明显的但是我得到了一个未被捕获的TypeError：undefined不是一个函数＆＃39;我似乎是.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属性以返回Array。由于.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(...” 错误

.map（）undefined不是React.js中的函数

3 个答案: