如何将 Api 调用的响应保存在状态中？

Question

我试图在我的组件状态中保存 Api 调用检索的数据，但由于异步函数，数据没有时间来，所以当我检查状态时，它的值是一个空数组。 这是代码。

async getValuesData() {
  let id = "dataid";
  let getValuesCall = urlCallToDatabase + "valuesById/" + id;
  const response = await fetch(getValuesCall, { headers: {'Content-Type': 'application/json'}})

  const res = await response.json()

  this.setState = ({
    values: res
  })

  console.log("Data Values: ", res);
  console.log("Data Values from state: ", this.state.values);
}

我正在调用构造函数中的函数。

Answer 1

您错误地调用了 setState。 它应该是：

this.setState({ values: res });

console.log() 调用，即使您调整了上述内容，也不会准确显示您的期望。 如果那是你想要的也试试这个：

this.setState({ values, res },
  () => {
    console.log("Data Values: ", res);
    console.log("Data Values from state: ", this.state.values);
  }
);

即，使 console.log() 成为 setState 的第二个参数，然后它将准确显示状态的值。

Answer 2

首先，如果您希望组件在安装数据后立即出现，则必须调用 ComponentDidMount 生命周期内的函数

其次，我会做以下事情：

我在同一个文件或不同的文件（例如 x.business.js）中声明调用后端并返回结果的函数：

const getValuesData = async () => {
  const id = "dataid";
  const getValuesCall = urlCallToDatabase + "valuesById/" + id;

  const response = await fetch(getValuesCall, { headers: {'Content-Type': 'application/json'}})

  return await response.json();
}

然后在组件中，如果我希望它在组装后立即被调用，这是我对其状态进行赋值的时候（如果你想检查它是否已经设置，你可以使用 setState 之后的回调分配）：

class SampleComponent extends React.Component {
  state = {
    values: {}
  }

  componentDidMount() {
    getValuesData().then(response => 
      this.setState(prevState => ({
      ...prevState,
      values: response
    }), () => {
      console.log(this.state.values);
    }))
  }

  ...
}

正如社区所说，一切都在文档中：

• componentDidMount ：如果您需要从远程端点加载数据并更新您的状态

• setState() ：更新组件的状态

这是它如何工作的一个例子

Answer 3

像这样使用

 this.setState({values: res})

使用this.setState()来安排对组件本地状态的更新

不要直接修改状态

// Wrong
this.state.values = res

相反，使用setState()

// Correct
this.setState({values: res});

Answer 4

你应该做这个：

    this.setState({values: res})

this.setState 应该是一个函数： https ://reactjs.org/docs/react-component.html#setstate

Answer 5

你必须使用setState而不是this.state = {}

this.setState({values: res})