在 React Native 中重置组件状态答案

【问题标题】：Reset component state in React Native在 React Native 中重置组件状态
【发布时间】：2020-05-27 04:13:32
【问题描述】：

我只想重置某些（不是所有）状态的状态。单击按钮时，present_count、total_count、present 和 total 的值应设置为其初始状态 (0)。而subjects 和text 的状态应该保持不变。

constructor(props) {
    super(props);
    this.state = { 
      subjects: [],
      text: "",
      present_count: [0, 0, 0, 0, 0, 0, 0],
      total_count: [0, 0, 0, 0, 0, 0, 0],
      present: 0,
      total: 0
    }
}

编辑： 我正在使用AsyncStorage 来保存修改后的状态。

【问题讨论】：

标签： javascript reactjs react-native state reset

【解决方案1】：

您可以使用spread operator覆盖当前状态值，然后使用text、subjects的当前状态值：

// default state 
const defaultState = {
  subjects: [],
  text: "",
  present_count: [0, 0, 0, 0, 0, 0, 0],
  total_count: [0, 0, 0, 0, 0, 0, 0],
  present: 0,
  total: 0
}

// component constructor.
constructor(props) {
    super(props);
    this.state = { ...defaultState };
}

// click event handler    
handleClick = () => {
  this.setState({
    ...defaultState,
    subjects: this.state.subjects,
    text: this.state.text
  });
}

【讨论】：

在this.state = defaultState; 中我不应该使用扩展运算符对 defaultState 进行浅表复制，否则它将被引用并且改变一个状态也会改变另一个状态。
点击按钮没有任何反应。我正在使用 AsyncStorage 将修改后的状态保存在其他函数中，我也应该在这里实现吗？如是！那怎么办？
对于第一条评论是的，应该使用传播运算符，我会更新我的答案。对于第二条评论，不确定为什么它没有在您的代码库中更新。
它正在工作。只是我需要杀死该应用程序，然后重新打开它以查看更改的状态。有什么方法可以在不杀死应用程序的情况下重新加载状态？

【解决方案2】：

您可以创建一个对象来存储您的状态您想要重置的初始状态，如下所示：

const initState = {
   total: 0,
   present: 0,
   present_count: [0, 0, 0, 0, 0, 0, 0],
   total_count: [0, 0, 0, 0, 0, 0, 0],
}

然后你就可以了

this.setState({
   ...initialState
})

在您的按钮上单击

希望有所帮助。 ^^

【讨论】：

【解决方案3】：

在这里使用扩展运算符可能会很有用。

constructor(props) {
    super(props);
    this.defaultState = {
      present_count: [0, 0, 0, 0, 0, 0, 0],
      total_count: [0, 0, 0, 0, 0, 0, 0],
      present: 0,
      total: 0
    }
    this.state = { 
      subjects: [],
      text: "",
      ...defaultState,
    }
}
.
.
.
onClick = () => {
  this.setState({
    ...this.defaultState, // This will only pass in values from your defaultState and leave the others (subjects & text) alone
  });
}

【讨论】：