javascript - react : Looping through an array within a state

Question

我正在 React 中构建一个组件。在我尝试遍历某个状态之前，一切似乎都运行良好。

这是我的组件:

var BidItem = React.createClass({
    getInitialState: function() {
      return {
        theMaxBid: '',
        theHighestBids: ''
      };
    },
    componentDidMount: function() {
      var $component = this;
      $.ajax({
        type : "post",
        dataType : "json",
        url : myAjax.ajaxurl,
        data : {action: "get_max_bid"},
      })
      .done(
        function(response){
          $component.setState({
            theMaxBid: response.max_bid,
            theHighestBids: response.highest_bids
          });
        }
      );
    },
    render: function() {
      var dd = [{ids:"2"}, {ids:"5"}];
      var cc = this.state.theHighestBids;
      console.log(cc);
      console.log(dd);

      return (
        <div>
           <p>Max Bid: {this.state.theMaxBid}</p>
        </div>
      )
    }
  });

这是有效的，并且在渲染函数中 cc 和 dd 都输出一个如下所示的数组:

当我在渲染函数中循环访问 cc 数组(来自状态)时:

{cc.map(function(result){
            console.log(result);
          })}

我收到以下错误:

Uncaught TypeError: cc.map is not a function

但是当我循环遍历下面的 dd 数组时，它起作用了:

{dd.map(function(result){
            console.log(result);
          })}

为什么我不能循环状态数组？

Answer 1

componentDidMount 函数在第一次渲染调用后运行，因此初始渲染不会有 this.state.theHighestBid(提示:highestBid)。第一次渲染运行 this.state.theHighestBid 返回 '' 没有 #map 函数。

将 getInitialState 更改为 theHighestBid: [] 它将第一次映射到一个空数组，然后在组件安装时调用你的 AJAX，然后你'将得到一个响应，该响应将填充将第二次呈现的状态。