在 React Native 中重置組件 state

Question

我只想重置某些（不是全部）狀態的 state。 單擊按鈕時， present_count 、 total_count 、 present和total的值應設置為其初始值 state (0)。 而subjects和text的 state 應該保持不變。

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保存修改后的 state。

Answer 1

您可以使用擴展運算符覆蓋當前的 state 值，然后使用當前的 state 值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
  });
}

Answer 2

您可以創建一個 object 存儲您的 state 您要重置的初始狀態 state，如下所示：

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
})

在你的按鈕上 onClick

希望有所幫助。 ^^

Answer 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
  });
}