javascript - Reset component state in React Native - Stack Overflow

admin管理员组

文章数量:1026104

I want to reset the state of only certain (not all) states. On the click of a button, values of present_count, total_count, present and total should be set to their initial state (0). While the state of subjects and text should remain intact.

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: I am using AsyncStorage to save the modified state.

I want to reset the state of only certain (not all) states. On the click of a button, values of present_count, total_count, present and total should be set to their initial state (0). While the state of subjects and text should remain intact.

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: I am using AsyncStorage to save the modified state.

• javascript
• reactjs
• react-native
• state
• reset

Share Improve this question Follow edited May 28, 2020 at 3:06 cmcodes asked May 27, 2020 at 4:13 cmcodescmcodes 1,8782121 silver badges2525 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You can use spread operator to override the current state values and then use the current state value of 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
}

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

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

You can create an object store your state your initial state of states you want to reset, like this:

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

and then you can

this.setState({
   ...initialState
})

on your button onClick

Hope that help. ^^

Using the spread operator would likely be useful here.

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

I want to reset the state of only certain (not all) states. On the click of a button, values of present_count, total_count, present and total should be set to their initial state (0). While the state of subjects and text should remain intact.

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: I am using AsyncStorage to save the modified state.

I want to reset the state of only certain (not all) states. On the click of a button, values of present_count, total_count, present and total should be set to their initial state (0). While the state of subjects and text should remain intact.

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: I am using AsyncStorage to save the modified state.

• javascript
• reactjs
• react-native
• state
• reset

Share Improve this question Follow edited May 28, 2020 at 3:06 cmcodes asked May 27, 2020 at 4:13 cmcodescmcodes 1,8782121 silver badges2525 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You can use spread operator to override the current state values and then use the current state value of 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
}

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

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

You can create an object store your state your initial state of states you want to reset, like this:

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

and then you can

this.setState({
   ...initialState
})

on your button onClick

Hope that help. ^^

Using the spread operator would likely be useful here.

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

本文标签： javascriptReset component state in React NativeStack Overflow