Question

我从API端点获取JSON数据，并希望使用此数据来显示表。

以下是我正在尝试的内容：

var DeliveryOptionsTHeadTh = React.createClass({
  render: function() {
    return (
      <th>{this.props.label}</th>
    );
  }
});

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

  },

  componentDidMount: function() {
    $.get(this.props.source, function(result) {
      console.log(result);
      this.setState({data: result});
    }.bind(this));
  },

  render: function() {
    return (
      <thead>
        <tr>
          <DeliveryOptionsTHeadTh label={this.state.data.days[0].label}/>
        </tr>
      </thead>
    );
  }
});

var DeliveryOptionsTable = React.createClass({
  render: function() {
    return (
      <table className='pure-table pure-table-horizontal'>
        <DeliveryOptionsTHead source="<REDACTED>" />
        <tbody>

        </tbody>
      </table>
    );
  }
});

ReactDOM.render(
  <DeliveryOptionsTable />,
  document.getElementById('example')
)

但这会返回Uncaught TypeError: Cannot read property '0' of undefined。为什么这不起作用？

Answer 1

您需要更改初始状态。Array为Objects render并且您正在尝试使用Array方法获取days中的第一个元素，但是初始状态没有var DeliveryOptionsTHead = React.createClass({ getInitialState : function(){ return { data: { days: [] } } }, componentDidMount: function() { $.get(this.props.source, function(result) { this.setState({data: result}); }.bind(this)); }, render: function() { var days = this.state.data.days.map(function (day) { return <DeliveryOptionsTHeadTh label={day.label} key={ day.date } />; }); return <thead> <tr>{ days }</tr> </thead>; } });属性，这就是你收到错误的原因

var markers = [];
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 7
      });
      var infoWindow = new google.maps.InfoWindow({map: map});

      // Try HTML5 geolocation.
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };

          map.setCenter(pos);


      // This event listener will call addMarker() when the map is clicked.
      map.addListener('click', function(event) {
        deleteMarkers();
addMarkers(event.latLng);


      });
      addMarkers(pos);
      // Adds a marker to the map and push to the array.
      function addMarkers(location) {
      var marker = new google.maps.Marker({
        position: location,
        map: map
      });
      markers.push(marker);
    }
  // Sets the map on all markers in the array.
  function setMapOnAll(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setMapOnAll(null);
}


    // Deletes all markers in the array by removing references to them.
    function deleteMarkers() {
        clearMarkers();
      marker = [];
    }


        }, function() {
          handleLocationError(true, infoWindow, map.getCenter());
        });

      } else {
        // Browser doesn't support Geolocation
        handleLocationError(false, infoWindow, map.getCenter());
      }

    }

Example

Answer 2

您似乎还没有声明初始状态，因此当您致电this.setState({data : result});时，您的反应是查找数据这应该有帮助

.....[other react specs code]

getInitialState : function(){
    return {
       data : []
    }

}

为什么'this.setState'不起作用？

2 个答案: