使用React进行状态重置和更新

如果您在Json博客上关注我，您会知道我非常喜欢React，就像JavaScript开发领域中的其他所有人一样。我正在使用的React应用程序相对较小，它获取请求以发送和接收数据，仅渲染一组数据，因此我根据组件的结果对组件进行了大量的重置state  以及少量的state修改。 AJAX请求。让我们看看我是怎么做的！

JavaScript

该state 对象没有太多内容，只有几个属性：

class Controller extends React.Component {

  // Added as a component property
  defaultState = { data: null, error: null };

  constructor(props) {
    super(props);

    // Set the default state immediately
    this.state = this.defaultState;
  }

  // ....
}

您可能会收集到其中一个data 或error 将要有数据，另一个将有数据，null因此，我实质上是在重置原始状态值，然后填充data 或error。为此，我创建了一个resetStateWithUpdates如下所示的方法：

resetStateWithUpdates(stateUpdates = {}) {
  // Rest operators ensure a new object with merged properties and values.
  // Requires the "transform-object-rest-spread" Babel plugin
  this.setState({ ...this.defaultState, ...stateUpdates });
}

And的用法如下:

// Ooops, fetch error!
// `data` implicitly reset to null
this.resetStateWithUpdates({
  error: 'Fetching data failed!  Please try again!',
});

// ... or we got good data!
// `error` implicitly reset to null
this.resetStateWithUpdates({ data });

使用散布运算符合并默认状态和更新的状态信息可保存来自多个setState 调用的多个渲染 。代码也很短！

每个人都有自己的方法来处理自己的React应用程序中的状态，因此我并没有断言这是通过少量更新即可重置状态的最佳方法，但它对我来说效果很好。该代码简短，描述性强且可重用！