javascript - .map() undefined is not a function in React.js - Stack Overflow

admin管理员组

文章数量:1180451

Right, I'm probably missing the obvious here but I am getting an 'Uncaught TypeError: undefined is not a function' I seems to be .map() that's the problem but I can not see why.

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')
);

If I change it to var ideas = this.state.data I don't get any errors, the JSON data is formatted correctly, what can be wrong?

Right, I'm probably missing the obvious here but I am getting an 'Uncaught TypeError: undefined is not a function' I seems to be .map() that's the problem but I can not see why.

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')
);

If I change it to var ideas = this.state.data I don't get any errors, the JSON data is formatted correctly, what can be wrong?

• javascript
• reactjs

Share Improve this question Follow edited Apr 17, 2014 at 20:17 t1m0thy asked Apr 16, 2014 at 17:21 t1m0thyt1m0thy 2,76633 gold badges1515 silver badges1414 bronze badges 4

• Are you sure that this.state.data is an array? – bobthedeveloper Commented Apr 16, 2014 at 17:28
• map is a function on JavaScript's Array; it's not defined by React. Make sure this.state.data is an Array. – Ross Allen Commented Apr 16, 2014 at 17:29
• Thats why I'm confused, state, as far as I'm aware has to be an array and state.data is defined in getInitialState: function() { return {data: []}; },. state.data is updated by loadCommentsFromServer. The script in question is returning properly formatted JSON data – t1m0thy Commented Apr 16, 2014 at 17:37
• state is always an Object, not an Array. Can you paste a sample return value from the Ajax call. My only guess is data is not an Array in the JSON response. – Ross Allen Commented Apr 16, 2014 at 20:42

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 19

It was a stupid mistake, quotes.php wasn't returning properly formatted JSON data so it wasn't an array .map() was being called on. The lesson learnt? Don't take other people word for it that their code works!

.map() is a method that create a new Array with results that are provided.

Here is the documentation for that:

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

The thing that you can do here would be to change the .data property of the object to return an Array. Since the .map() would work on Array type objects only.

if this helps any one, another easy to overlook error is to initialize the variable to an empty object instead of an empty array in the state and calling map().

for example, declaring below

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

instead of

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

and trying to call map() on the object

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

will lead to "undefined is not a function near ... list.map(..." error during load of the component

本文标签： javascriptmap() undefined is not a function in ReactjsStack Overflow