Uncaught TypeError: this.state.data.map is not a function

问题

I am new to React, have seen some of the similar issues, but didn’t find why this happens. I am getting an “Uncaught TypeError: this.state.data.map is not a function”. Here is the code. Please, help to find what is the problem.

class Audienses extends React.Component {

    constructor (props)
    {
        super(props);

        this.state = {
            data: ''
        };

        this.loadFromServer = this.loadFromServer.bind(this);
        this.childeDelete = this.childeDelete.bind(this);
        this.childeEdit = this.childeEdit.bind(this);

    }

    loadFromServer () {
        var xhr = new XMLHttpRequest();
        xhr.open('get', this.props.url, true);
        xhr.onload = function() {
            var data = JSON.parse(xhr.responseText);
            this.setState({ data: data });

        }.bind(this);
        xhr.send();
    }

    componentDidMount() {
        this.loadFromServer();   
    }


     render () {

         var audienses = this.state.data.map((value, index) => (
           <OneElement key={value.id} audience={value.audience} description={value.description} />
        ));

        /* or like this
         var audienses = this.state.data.map(function(s) {
             <OneElement key={s.id} audience={s.audience} description={s.description} onDeleteClick={this.childeDelete} oneEditClick={this.childeEdit} />
         }).bind(this);
        */
         return
        <div>
            <h1>Audiences</h1>
            <table id="services">
                <tr>
                    <th>Audience</th>
                    <th>Description</th>
                    <th></th>
                    <th></th>
                </tr>
                <tbody>
                   {audienses}
                </tbody>
            </table>
        </div>;
    }
}

回答1:

Your initial data state is String., String does not have method .map, you need change your initial state from '' to []

this.state = {  data: [] };

回答2:

.map is not applicable to a String object. Consider changing 'data' to an array. .map is a method that calls a function on every element of an array.

回答3:

I have the same error in react-redux.

problem was when I add new product in add/product page and click on the back button then the component of the home page is showing this error

home_container.js:8 Uncaught TypeError: products.product.map is not a function

renderItems = (products) => (
            products.product ? 
            products.product.map(item => (
                <ProductItem {...item} key = { item._id } />
            ))
            : null
        )

solution

I am passing {} instead of [] from the node server

So, when you have this type of error in react-redux then first check what you are passing from the server into that field and also check reducers of that particular component.

来源：https://stackoverflow.com/questions/39329100/uncaught-typeerror-this-state-data-map-is-not-a-function

标签

javascript

reactjs

react-jsx