Question

我有一个基本的rect组件，我已经知道如何从受保护的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

像这样......

export default class extends React.Component {
  constructor(props) {
    super(props);
    // initialize myData to prevent render from running map on undefined
    this.state = {myData: []};
  }

  // use componentDidMount lifecycle method to call function
  componentDidMount() {
    // call your function here, and on promise execute `setState` callback
    getValues()
      .then(data => {
        this.setState({myData: data})
      }
  }

  render() {
    // create a list
    const items = this.state.myData.map((datum) => {
      return <LayoutContent>
        <h1>{datum}</h1>
      </LayoutContent>
   });

    // return with the list
    return (
      <LayoutContentWrapper style={{ height: '100vh' }}>
        {items}
      </LayoutContentWrapper>
    );
  }
}

Answer 2

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

您的示例看起来好像是一次性API调用并不依赖于任何道具，因此将其置于构造函数中将是有效的。

我会将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>
        );
    }
}

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

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

基本的反应，如何获取REST数据并进行渲染

2 个答案: