javascript - React.js - 从 API 正确加载单个帖子数据

Question

我是 React 的新手，正在努力研究如何正确地从我的 API 为单个帖子加载数据。

我读到过我应该使用“componentDidMount”向 API 发出 GET 请求，但请求在组件呈现时尚未完成。所以我下面的代码不起作用，因为我收到错误:“无法读取未定义的属性 setState”。

我在这里做错了什么？我应该从其他地方调用 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;