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);
  }

我觉得传递this并从下游api文件修改状态不是一个好习惯。是否有更多的反应＆＃34;这样做的方法？

我还尝试了另一种方法，即等待回调发送回响应，然后根据响应修改状态，但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();
  });
};

yourComponent.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});
      })
  }

Answer 2

进行API调用并根据调用返回的内容设置组件的状态是反应中的常规做法。您不需要将对此的引用传递给getStatus，因此您不需要将任何内容传递给getStatus。相反，链接然后从getStatus返回的内容。

    componentDidMount() {
    getStatus()
      .then(status => {
        this.setState({status});
      })
  }

也无需在组件中调用构造函数或超级函数。只需写下：

class List extends React.Component {
   state = {
      status: []
   }
}

Answer 3

如果您使用的是ES6，请尝试使用异步函数语法来提高可读性。

api.js

export const getStatus = () => fetch(`${baseURL}/api/status`);

yourComponent.jsx

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

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

  async componentDidMount() {
    const res = await getStatus()
    this.setState({status: res.json()});
  }

此外，您可能不需要初始化状态，如果是这样，您可以删除构造函数。

Answer 4

我有一个工作代码：

    fetch(serviceUrl)
        .then(result => result.json())
        .then(newStatus => this.setState({status: newStatus}))
        .catch(error => {
          console.log(error);
          this.setState({status: 'error'});
        })

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

4 个答案: