Реагирование: петля через массив в состоянии

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.map(function(result){ 
      console.log(result); 
      })} 

я получаю следующее сообщение об ошибке:

Uncaught TypeError: cc.map is not a function 

Но когда я Переберите ниже массива дд, он работает:

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

Почему я не могу мертвую массив состояния?

Answer 1

Функция componentDidMount get запускается после первого вызова рендера, поэтому первоначальный рендер не будет иметь this.state.theHighestBid (совет: highestBid). Первый раз рендер выполняется this.state.theHighestBid возвращает '', который не имеет функции #map.

Изменение getInitialState «s в theHighestBid: [] и сопоставит через пустой массив в первый раз, а затем вызвать ваш AJAX, когда компонент монтирует, а затем вы получите ответ, который будет заполнять состояние, которое будет оказывать во второй раз ,

Answer 2

Why can't I loop the state array?

Потому что у вас нет массива! theHighestBids: '' создает пустую строку.

Изменить

getInitialState: function() { 
    return { 
    theMaxBid: '', 
    theHighestBids: '' 
    }; 
} 

Для

getInitialState: function() { 
    return { 
    theMaxBid: '', 
    theHighestBids: [] 
    }; 
} 

И убедитесь, что response.highest_bid также является массивом.