React.js - 从 API 正确加载单个 post 数据

Question

我是 React 的新手，我正在努力研究如何正确地从我的 API 中为单个 post.

加载数据

我读到我应该使用 "componentDidMount" 向 API 发出我的 GET 请求，但该请求在组件呈现时尚未完成。所以我下面的代码不起作用，因为我收到错误："Cannot read property setState of undefined".

我这里做错了什么？我应该从其他地方调用 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 正确加载单个 post 数据

React.js - Loading single post data from API correctly

javascript

reactjs

axios