Javascript 未捕获类型错误：this.state.data.map不是函数

我是新的反应，已经看到了一些类似的问题，但没有找到为什么会发生这种情况。我得到一个“未捕获类型错误：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>;
    }
}

类Audienses扩展了React.Component{
建造师（道具）
{
超级（道具）；
此.state={
数据：“”
};
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=函数（）{
var data=JSON.parse（xhr.responseText）；
this.setState（{data:data}）；
}.约束（本）；
xhr.send（）；
}
componentDidMount（）{
这是loadFromServer（）；
}
渲染（）{
var audienses=this.state.data.map（（值，索引）=>(
));
/*还是像这样
var audienses=this.state.data.map（函数）{
}).约束（本）；
*/
返回
观众
观众
描述
{audienses}
;
}
}

您的初始

数据

状态为

字符串

，

字符串

没有方法

.map

，您需要将初始状态从

'

更改为

[]

---

.map

不适用于字符串对象。考虑将“数据”更改为数组。code>.map是一种对数组的每个元素调用函数的方法

我在react redux中也有同样的错误

问题是，当我在add/product页面中添加新产品并单击back按钮时，主页的组件显示此错误

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

renderItems=（产品）=>(
产品，产品？
products.product.map（项=>(
))
：null
)

首先必须将数据拆分为数组，然后才能使用映射功能。而不是

 this.state.data.map

使用

---

如果数据是字符串类型，则必须使用

this.state.data.split（“”）.map（ch=>{console.log（'Hello from map'）}）

 this.state.data.map

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