在 React 中处理来自 api 的数据的最佳实践答案

【问题标题】：Best practice to handle data from api in React在 React 中处理来自 api 的数据的最佳实践
【发布时间】：2021-02-03 03:06:31
【问题描述】：

我正在处理我的第一个 React 项目并遇到了这个问题。

使用this.state 处理和存储数据的最佳方式是什么？

我目前的工作流程：

从componentDidMount()中的api获取数据
将数据存储在this.state 中（例如在this.state.account_data 中作为子对象`
使用<input>等控件的value属性中的数据：this.state.account_data.username
每个控件都有自己的onChange-handler onChange={e => this.onChangeUsername(e)}

方法onChangeUsername(e) 将this.state 更改为this.setState({username: e.target.value})。

所以，问题是：更改 unsername 控制值后，this.state 中的用户名有两个变体：this.state.account_data.username 和 this.state.username。这需要创建另一部分代码来更新this.state.account_data，因为我想通过UserService.update(this.state.account_data) 将新数据发送到API。

有没有更简单的方法或最佳做法是什么？

【问题讨论】：

直接避免状态操作。改为使用 React-Redux。介绍请参考here。
为什么要直接避免状态操作？
随着应用程序规模的增长，它变得越来越困难。为什么不试试 redux？我敢肯定，一旦你有了这个概念，你就不会问这个问题了。为整个应用程序维护单一的事实来源更加合乎逻辑且更容易。
redux 很好，当您有不同的组件共享相同的状态并且您希望避免父组件存储它并通过 props 传递数据的必要性时，HOC 模式。在很多情况下，如果您使用其他状态管理架构，例如Apollo + Next + Graphql，它可能会导致过度设计或无用。

标签： reactjs

【解决方案1】：

根据official documentation，React 建议使用这个库来处理数据突变：immutability-helper。

这个想法是，在您的onChangeUsername(e) 中，您将复制需要使用update 函数更新的原始状态部分。在本例中为 const myNewAccountData = update( this.state.account_data, ... )，然后您使用 this.setState({account_data : myNewAccountData }) 设置新状态。

有关使用immutability-helper 更新嵌套对象的示例，请参阅this answer。

Here 你可以找到解释为什么要避免嵌套对象作为 React 状态，或者至少为什么它可能被认为不是最佳实践。

【讨论】：