javascript - api调用后更新组件的正确方法是什么

Question

假设我有这个组件，它将定期从 API 获取所有数据。

//在父组件上

constructor(props) {
  super(props);
  this.state = {
    datas: [],
  }
  this.apiCall = this.apiCall.bind.this
}

apiCall(){
  //fetch data here
  this.setState({
    datas: //result from fetch
  })
}

ComponentDidMount(){
  this.interval = setInterval(() => this.apiCall(), 10000);
}

handleEditData(){
  //api call, edit one data in server using POST
}

...
<ChildComponent onEdit={this.handleEdit}/>

子组件编辑数据时该怎么办？或者我应该在handleEditData中放入什么？

1. 我是否应该通过向 api 发送 POST 来编辑一项数据，然后使用 handleEdit 中的 setState 手动更新本地状态？
2. 或者我应该发送 POST 到 api，然后调用 apiCall 函数来获取新数据，这些数据会更改其状态并重新渲染？

谢谢

Answer 1

这是一个有趣的问题，它不是一个关于 React 的问题，而是一个资源管理问题。要问的问题是数据在做什么。如果您有需要记录的数据，则应使用 API 存储数据。如果数据要在您的应用程序中重复使用并且您已经拥有它，为什么不在原位使用它呢？它减少了您的调用(从而使应用程序更加高效)，并且在此过程中减少了一个损坏点。

重申一下:当你设计一个系统时，在涉及更多移动部件之前，你应该先考虑局部情况。我只是简单地冒泡数据并将 setState 与本地对象一起使用。