Uncaught TypeError：this.props.data.map不是函數（使用superagent）

Question

我得到'props.data.map不是函數錯誤'。我也有console.log'this.props.data'在ResultList中，但不知何故它仍然沒有映射。我也嘗試了谷歌和stackoverflow中的所有相關鏈接。

請指教。任何幫助將不勝感激！！謝謝你們:)

這裏的鏈接顯示響應的截圖： image

var Results = React.createClass({ 
    getInitialState: function() { 
    return {data: []}; 
    }, 

    componentDidMount: function() { 
    // loading results from server for initialization 
    this.loadResultsFromServer(); 
    }, 

    loadResultsFromServer: function() { 
    superagent 
    .get('http://localhost:5000/analyzer') 
    .end(function(err, res){ 
     if (res) { 
     console.log(res); 
     this.setState({data: res.text}); 
     } else { 
     console.log("error loading results from server: ", err); 
     } 
    }.bind(this)); 
    }, 

    render: function() { 
    return (
     <div> 
     <ResultList data={this.state.data} /> 
     </div> 
    ); 
    } 
}); 

var ResultList = React.createClass({ 
    render: function() { 
     var resultNodes = this.props.data.map(function (result) { 
     return (
      <Result name={result.Name}> 
      {result.Score} 
      </Result> 
     ); 
     }); 

     return (
     <div> 
      {resultNodes} 
     </div> 
    ); 
    } 
}); 

Answer 1

它看起來像你的res.text是一個字符串，而不是一個數組。這意味着它將不具備.map功能。如果這是您的API返回的響應，則需要在設置狀態時調用JSON.parse，即：

this.setState({ data: JSON.parse(res.text) });