Question

我正在尝试设置Axios Response数据的状态。 REST调用有效，但状态未设置。

this.state = {
  source: sources['bunnyMovie'],
  startDate : moment(),
  endDate: moment(),//endDate : moment()
  filename: "",
  storageArea: [],
  v_bucketName: "",
  v_creationDate: "",
};
componentDidMount() {
const self = this;
axios.get(`/api/Storage/`)
  .then(response => {
    self.setState({storageArea: response.data});
    console.log(response);
    console.log("StorageArea: " + self.storageArea);
  });

}

 <option value="" />
                    {this.state.storageArea.map((Buckets, i) => (
                      <option native="true" key={i} value={Buckets.Name}>
                        {Buckets.Name}
                      </option>

但是storageArea为null。顺便说一句，在我更改之前，类型可以是数组或为NULL。无论哪种方式，它都无法正常工作。我错过了什么？

Answer 1

您可以使用

访问storageArea

this.state.storageArea

无论如何，状态将异步更新，所以你可能想要

console.log(this.state.storageArea)

在render方法中，而不是在setState

之后

Answer 2

首先，将您的控制台输出更改为self.state.storageAge

接下来，我建议您在调用render()之后，而不是直接在setState方法中测试状态更改。这是因为每次调用setState时，React都会重新呈现所有组件。

根据React docs：

setState()不会立即改变this.state，但会创建挂起状态转换。调用此方法后访问this.state可能会返回现有值。无法保证对setState的调用进行同步操作，并且可以对调用进行批处理以获得性能提升。

Answer 3

如前所述，setState是异步的，因此如果要记录更新后的状态，则需要在更新完成后调用console.log。
在render方法中进行操作会有效，但我发现在setState回调清理器中调用它。

self.setState({storageArea: response.data},() => console.log(self.state.storageArea))

反应页面中的Axios响应

3 个答案: