Question

这可能是一个非常简单的问题，但我似乎正在找到各种答案。本质上，我有一个应用程序可以通过JSON API进行axios调用以获取项目列表。

我需要在组件加载上设置初始状态，我的状态看起来像这样：

this.state = {
  sensors: [],
  filterName: "",
  sortBy: "id",
};

我的组件加载代码如下：

  componentDidMount =() => {
    axios
      .get("http://localhost:3000/api/v1/devices.json")
      .then((response) => {
        // handle success
        console.log(response);
        this.setState({ sensors: [...response.data]});
      })
      .catch((error) => {
        console.log(error);
      })
  }

这可行...但是我觉得这不是正确的方法。难道不是因为我记得读过我们不应该只返回它的新版本而改变初始状态吗？

有没有更好/更安全的方法？

（还有更新单个对象/将对象添加到对象数组的方法吗？有没有“首选方法”）

Answer 1

如果您希望在不直接改变状态的情况下将元素添加到传感器阵列，则可以这样做。

const { sensors } = this.state;
this.setState({ 
  sensors: [...sensors, response.data]
});

这是因为我们正在使用扩展语法对数组进行解构，然后使用API中的response.data将其复制到新的数组中。

反应将初始状态设置为对象数组

1 个答案: