未捕获的 TypeError：this.state.stock.map 不是 React 中的函数答案

【问题标题】：Uncaught TypeError: this.state.stock.map is not a function in React未捕获的 TypeError：this.state.stock.map 不是 React 中的函数
【发布时间】：2016-07-14 06:10:17
【问题描述】：

新的反应，已经看到一些类似的标题如下，但仍然无法澄清控制台上的错误说 Uncaught TypeError: this.state.stock.map is not a function 。当我在另一个 api 调用中使用类似的代码时，就不会出现这样的错误。代码如下。如果我将 get 方法中的数据分配给库存，那么它也不起作用并给出相同的问题。问题是什么？我提到的几个链接。

Link 1 Link 2

Image after discussion.

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

      componentDidMount: function() {
        this.serverRequest = $.get(this.props.source, function (data) {
           var old = JSON.stringify(data).replace("//", ""); //convert to JSON string
           var obj = JSON.parse(old);                        //convert back to JSON
           console.log(obj);
           this.setState({
              stock: obj
            });
        }.bind(this));
      },

      componentWillUnmount: function() {
        this.serverRequest.abort();
      },

      render: function() {
        return (
                React.createElement("div",null,
                        React.createElement("ul",null,
                            this.state.stock.map(function (listValue){
                                return React.createElement("li",null,listValue.t,"( ",listValue.e," )-"," Current Price :",listValue.l_cur,"  Date :",listValue.lt
                                );
                            })
                        )
                    )
        );
      }
    });

    ReactDOM.render(React.createElement(StockData, { source: "http://www.google.com/finance/info?q=NSE:ATULAUTO,WIPRO,INFY" }),document.getElementById('proper-list-render3'));

【问题讨论】：

标签： reactjs

【解决方案1】：

将渲染函数替换为将 this 存储为 self

 render: function() {
        var self = this;
        return (
                React.createElement("div",null,
                        React.createElement("ul",null,
                            self.state.stock.map(function (listValue){
                                return React.createElement("li",null,listValue.t,"( ",listValue.e," )-"," Current Price :",listValue.l_cur,"  Date :",listValue.lt
                                );
                            })
                        )
                    )
        );
      }

【讨论】：

问题依然存在。
你可以在渲染中使用 console.log(this.state) 吗？我猜 this.state.stock 可能不是数组。让我们看看
检查问题所附的图片。
stock 是一个 json 字符串化字符串
服务器返回 json 字符串，在 componentDidmount 中，你把它字符串化然后解析它，最终结果是一个字符串

【解决方案2】：

我终于找到了问题的解决方案。调用url后接收到的数据是字符串格式而不是JSON。正确的代码如下，现在它工作正常。感谢@Piyush.kapoor 的帮助。

  componentDidMount: function() {
        this.serverRequest = $.get(this.props.source, function (data) {     
           var old = data.replace("//", "");   
           this.setState({   
                    stock: JSON.parse(old)   
               });
        }.bind(this));
      }

【讨论】：