javascript - 基本的 reactjs，如何获取 REST 数据并渲染它

Question

我有一个基本的矩形组件，我已经想出了如何从 protected rest api 获取数据，但是我不确定如何在组件中呈现它以及如何调用该函数，或者我应该在哪个生命周期调用函数。

import React, { Component } from 'react';
import LayoutContentWrapper from '../components/utility/layoutWrapper';
import LayoutContent from '../components/utility/layoutContent';
var q = require('q');

var Adal = require('../adal-webapi/adal-request');

function getValues() {
    var deferred = q.defer();
    Adal.adalRequest({
      url: 'https://abc.azurewebsites.net/api/values'
    }).then(function(data) {
      console.log(data);
    }, function(err) {
      deferred.reject(err);
    });
    return deferred.promise;
  }

export default class extends Component {



  render() {
    return (
      <LayoutContentWrapper style={{ height: '100vh' }}>
        <LayoutContent>
          <h1>Test Page</h1>
        </LayoutContent>
      </LayoutContentWrapper>
    );
  }
}

Answer 1

您选择用于获取数据的生命周期方法在很大程度上取决于您是否需要随时更新数据并重新渲染，或者该数据是否取决于传递给组件的任何 Prop 。

您的示例看起来好像是一次性 API 调用，不依赖于任何 Prop ，因此将它放在构造函数中是有效的。

我会将 getValues 代码移到类中，然后执行类似的操作。注意:我使用了 async/await，但如果您愿意，也可以使用 promise 回调。

export default class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: []
        }
        this.fetchData();
    }

    async fetchData() {
        try {
            const data = await this.getValues();
            !this.isCancelled && this.setState({ data });
        } catch(error) {
            // Handle accordingly
        }
    }

    getValues() { 
        // Your API calling code
    }

    componentWillUnmount() {
        this.isCancelled = true;
    }

    render() {
        const { data } = this.state;
        return (
            <ul>
                {data && data.map(item => (
                    <li>{item.name}</li>
                ))}
            </ul>
        );
    }
}

如果您需要在任何时候再次获取数据，您可以使用其他生命周期钩子(Hook)之一来监听 prop 更改，并再次调用 fetchData 方法。

请注意，在异步调用完成之前为组件卸载包含一个故障保护，以防止 React 抛出有关在卸载组件中设置状态的错误。