如何在Reactjs中具有多个getInitialState实例？

Question

This is my code in React. I have multiple instances of getInitialState for different functions. However, I am finding that there may be a problem with getting them all to run this way.

getInitialState: function(){
if (localStorage.getItem('something'))
{return {signedin: true}}
else {return {signedin: false}}
},

getInitialState:function(){
return {error: true}
},

getInitialState:function(){
return {fliphouse: false}
},

To explain, the second instance of getInitialState , as is, does not work. That is, unless, I flip the order of the second and third getInitialState . When I do that, the code runs as it should. But I get the feeling React is trying to tell me something.

Is this normally the way to organize React code within a component?

Answer 1

You can define them all in the same object:

getInitialState() {
  return {
    signedIn: !!localStorage.getItem('something'),
    error: false,
    fliphouse: false
  };
}

You can change them individually anywhere in the component (except in the render() function), eg:

this.setState({ error: true }) // causes a new render

Answer 2

This is not the correct way to put the initial state of the component. Initial state function is called only once when you component is about to mount; over here you set the state of the component(what variables or object properties you need) and then update them accordingly using setState in other methods like componentDidMount etc..

So in your question I would say put all 3 variables signedIn, error and fliphouse in the state object and then update this object. So a single initialState function would do.