Question

我对React相当陌生，并尝试着我应该如何正确地从我的API加载一个帖子的数据。

我已经读过我应该使用＆＃34; componentDidMount＆＃34;向API发出我的GET请求，但请求在组件呈现时没有完成。所以我的代码不起作用，因为我收到了错误：＆＃34;无法读取未定义的属性setState＆＃34;。

我在这里做错了什么？我应该从其他地方调用setState吗？我的简单组件如下 - 谢谢。

import React from 'react';
import Header from './Header';
import axios from 'axios';

class SingleListing extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            listingData: {}
        }
    }

    componentDidMount() {

        // Get ID from URL
        var URLsegments = this.props.location.pathname.slice(1).split('/');

        // Load the listing data
        axios.get('/api/listing/' + URLsegments[1])
            .then(function(res){

                let listingDataObject = res.data;
                console.log(listingDataObject);
                this.setState({
                    listingData: listingDataObject
                });

            })
            .catch(function(err){
                console.log(err);
            });

    }


    render() {

        console.log('helsdfdsfsdflssosso');
        console.log(this.state.listingData);

        return (
            <div className="SingleListing">
                <Header />
                <div className="container">

                    <div>Property Address: {this.state.listingData.propertyAddress}</div>
                    This is a single listing
                </div>
            </div>
        )
    }

}
export default SingleListing;

Answer 1

您只需更改渲染内容，具体取决于数据是否已加载。

此外，您应该在处理axios响应时使用箭头功能，否则this设置不正确。

class SingleListing extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      listingData: null,
    };
  }

  componentDidMount() {
    // Get ID from URL
    const URLsegments = this.props.location.pathname.slice(1).split('/');

    // Load the listing data
    axios
      .get(`/api/listing/${URLsegments[1]}`)
      .then(res => {
        const listingDataObject = res.data;
        console.log(listingDataObject);
        this.setState({
          listingData: listingDataObject,
        });
      })
      .catch(err => {
        console.log(err);
      });
  }

  render() {
    const isDataLoaded = this.state.listingData;

    if (!isDataLoaded) {
      return <div>Loading...</div>;
    }

    return (
      <div className="SingleListing">
        <Header />
        <div className="container">
          <div>Property Address: {this.state.listingData.propertyAddress}</div>
          This is a single listing
        </div>
      </div>
    );
  }
}

export default SingleListing;

Answer 2

this超出了您需要包含它的范围。这是使用es2015箭头函数=>

的解决方案

axios.get('/api/listing/' + URLsegments[1])
        .then((res) => {
            let listingDataObject = res.data;
            console.log(listingDataObject);
            this.setState({
                listingData: listingDataObject
            });

        })
        .catch((err) => {
            console.log(err);
        });

React.js - 正确加载API中的单个发布数据

2 个答案: