Сбросить состояние компонента в React Native

Question

Я хочу сбросить состояние только определенных (не всех) состояний. При нажатии кнопки значения 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
    }
}

EDIT: Я использую AsyncStorage для сохранения измененного состояния.

Answer 1

Здесь, вероятно, будет полезно использовать оператор распространения.

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

Answer 2

Вы можете использовать оператор распространения , чтобы переопределить текущие значения состояния, а затем использовать текущее значение состояния 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 3

Вы можете создать объект, в котором будет храниться ваше начальное состояние состояний, которые вы хотите сбросить, например:

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

Надеюсь, что это поможет. ^^