未捕获的类型错误：this.state.data.map不是一个函数。

Question

我是React的新手，看到了一些类似的问题，但是没有找到为什么会发生这种情况。我遇到了一个“未捕获的类型错误：this.state.data.map不是一个函数”的问题。 以下是代码，请帮忙找出问题所在。

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>;
    }
}

- Ang

Answer 1

你的初始 data 状态是 String 类型，String 不存在 .map 方法，你需要将初始状态从 '' 改为 []

this.state = {  data: [] };

- Oleksandr T.

Answer 2

.map 不适用于字符串对象。请将 'data' 更改为数组。 .map 是一个方法，它在数组的每个元素上调用一个函数。

- JFAP

Answer 3

我在使用React-Redux过程中遇到了同样的错误。

问题出现在我在添加/产品页面中添加新产品并单击返回按钮后，主页组件显示了此错误。

home_container.js:8未捕获的类型错误：products.product.map不是函数

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

解决方案

我从node服务器传递了{}而不是[]。

因此，如果您在react-redux中遇到此类错误，请首先检查您从服务器传递到该字段的内容，并检查该特定组件的reducers。

- Prakash Karena

Answer 4

我曾经遇到过同样的问题，但是在我的情况下，是因为从控制器获取数据时JSON函数缺少括号。

fetch("https://localhost:44361/Api/Department").then(res=>res.json())
    .then(result => {
        this.setState({Departments:result});
    }
);

- Rahimullah Niazi

Answer 5

如果您的数据是字符串类型，那么您必须使用以下代码：this.state.data.split('').map(ch=>{ console.log('Hello from map') })

- NITIN MODI

Answer 6

首先，您必须将数据拆分为数组，然后才能使用map函数。而不是

 this.state.data.map

使用

this.state.data.split('').map()

- Lakshitha