javascript - 如何根据回调的响应在 componentDidMount 中设置状态

Question

我基本上是尝试根据从 API 获得的响应来设置状态。

api.js

const baseURL = "http://localhost:8000";

export const getStatus = (list) =>  {
  fetch(`${baseURL}/api/status`).then(res => {
    return res.json();
  }).then(status => {
    list.setState({status: status});
  });
};

这就是我从组件中调用它的方式

import React, {PropTypes} from 'react';
import {getStatus} from '../../../api';

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      status: [],
    };
  }
  componentDidMount() {
    getStatus(this);
  }

我觉得从下游 api 文件传递​​ this 并修改状态并不是一个好的做法。有没有更“ react ”的方式来做到这一点？

我还尝试了另一种方法，即等待回调发回响应，然后根据响应修改状态，但是 setState 函数永远不会在 componentDidMount 中执行。如果有人可以指导我，那就太好了!

api.js

const baseURL = "http://localhost:8000";

export const getStatus = () =>  {
  fetch(`${baseURL}/api/status`).then(res => {
    return res.json();
  }).then(status => {
    return status;
  });
};

<小时/>

import React, {PropTypes} from 'react';
import {getStatus} from '../../../api';

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      status: [],
    };
  }
  componentDidMount() {
    getStatus((status) => {
      this.setState({status: status});
    })
  }

Answer 1

更好的方法是在 componentDidMount 中使用 .then()

api.js

export const getStatus = () =>  {
  return fetch(`${baseURL}/api/status`).then(res => {
    return res.json();
  });
};

你的组件.jsx

import React, {PropTypes} from 'react';
import {getStatus} from '../../../api';

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      status: [],
    };
  }
  componentDidMount() {
    getStatus()
      .then(status => {
        this.setState({status: status});
      })
  }