Uncaught TypeError：this.state.data.map不是函數

Question

我是React的新手，看過一些類似的問題，但沒有找到原因。我得到一個「Uncaught TypeError：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>; 
    } 
} 

Answer 1

您最初的data狀態String，String沒有辦法.map，你需要從''改變你的初始狀態到[]

this.state = { data: [] }; 

Answer 2

.map並不適用於一個String對象。考慮將「數據」更改爲數組。 .map是一種在數組的每個元素上調用函數的方法。