ReactJS 以正确的方式获取服务器数据

Question

所以我尝试在 ES6 标准上构建一些 React 组件，但我的代码在获取服务器数据时出现问题我不断收到 Uncaught TypeError: Cannot read property 'map' of undefined

import React from 'react';

class PropertiesList extends React.Component {

  constructor(props){

    super(props);
    this.state = { data:[]}
  }


  loadPropertiesFromServer() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: (data) => {
        console.log(data);
        this.setState({data: data});
      },
      error: (xhr, status, err) => {
        console.error(this.props.url, status, err.toString());
      }
    });
  }

  componentDidMount() {
    this.loadPropertiesFromServer();
    setInterval(this.loadPropertiesFromServer.bind(this), this.props.pollInterval);;
  }

  render() {
    var propertyNodes = this.props.data.map((property) => {

    return (<Property>
                  {property.description}
            </Property>)
     });

    return <div className="row">
        <div className="col-lg-12">
          <h1>Available Properties</h1>
          {propertyNodes}
        </div>
    </div>;
  }
}

export default PropertiesList

入口点

import React from 'react';
import PropertiesList from './../components/propertylist.jsx';
import Filters from './../components/filter.jsx';
import Properties from './../models/PropertiesModel.js';
    class TransProperties extends React.Component {

      render() {

        return <div className="row">
            <div className="col-lg-9">
                <PropertiesList url="/properties.json"/>
            </div>
            <div className="col-lg-3">
                <Filters/>
            </div>
        </div>;
      }
    }

    export default TransProperties

Answer 1

在您的 render() 方法中，您尝试访问 this.props.data 而不是 this.state.data

ReactJS 以正确的方式获取服务器数据

ReactJS fetch server data in a proper way

rendering

reactjs