更漂亮的将seten移入setState，触发无序列如何改善setState？

问题描述

我正在React / TS项目上尝试更漂亮。我对setState以及Prettier如何移动括号有疑问。

这是我的组件之一的状态：

type State = {
  isEdit: boolean;
  model: PaymentMethodModel;
}

我正在使用以下代码来更新状态。

this.setState(
  (state) => ((state.model.paymentMethod = paymentMethod,state)),this.updateValidation
);

漂亮将其更改为：
（请注意状态后移动的结束括号。）

    this.setState(state => ((state.model.paymentMethod = paymentMethod),state),this.updateValidation);

更漂亮的代码更改后，这将触发no-sequences。 似乎没有办法更改Prettier的行为。 以前，我使用...运算符更新了状态，但是那样我就失去了输入。

以下是合理的解决方案吗？

this.setState(
  (state) => (): State => {
    state.model.paymentMethod = paymentMethod;
    return state;
  },this.updateValidation
);

解决方法

在讨论代码样式之前，您还应该了解有关示例的其他信息。

更改状态会给您一些问题，因为您的组件不一定会在需要时重新渲染。

您应该始终返回代表下一个状态的新对象：

this.setState(
  (state) => ({
    model: {
      ...model,paymentMethod: paymentMethod,}
  }),this.updateValidation
);

请参见https://reactjs.org/docs/state-and-lifecycle.html#using-state-correctly