How to setState entire object?

Question

My app has a user control panel and when the page is loaded it fetch data from the server using Redux.

In construction the component create an initial state like:

const { profile } = this.props;
this.state = {
  prop1: profile.prop1 || '',
  prop2: profile.prop2 || '',
  nested: {
    nestedProp1: profile.nested.nestedProp1 || '',
  }
  ...etc...
}

On componentWillMount I have this:

componentWillMount() {
  const { user, getProfile } = this.props;

  if (user.profile_id) {
    getProfile(user.profile_id);
  }
}

What I don't understand are 2 things:

Is the approach correct? I'm using state to handle form inputs.
How can I update the state when fetched? There are plenty of properties in this profile object and I was wondering to update all the states in a very simple way, and not one by one...

Your shared code is not detailed enough, my observation is: if you already have redux (so you are an application state management) why do you need to store the state also in the component? Why you don't just use properties that came from redux? — keul, Oct 19 '18 at 08:42
I don't know how to handle inputs values using only redux... — Ayeye Brazo, Oct 19 '18 at 08:44
As per my understanding, the overall objective is to update a whole object using setState method. You can find it over here: https://stackoverflow.com/questions/43638938/updating-an-object-with-setstate-in-react — Dhruv Shah, Oct 19 '18 at 08:48
You don't need Redux for input values, local state is fine for those. I don't know how you fetch data with Redux, you need some kind of middleware to do that, you using a thunk? Custom middleware? where is your fetch located? Give us more insight. — markymark, Oct 19 '18 at 09:00
Data is coming correctly with `getProfile`, `(this.props.getProfile(id)`. Now I need to update the state for all its properties fetched. — Ayeye Brazo, Oct 19 '18 at 09:04

Jimi Pajala · Answer 1 · 2018-10-19T10:20:25.143

You could use static getDerivedStateFromProps(props, state) -method to update your component state from props whenever your Redux store updates. It has two params props and state.

class App extends React.Component {
  // https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops
  static getDerivedStateFromProps(props, state){
    // Compare and update state only if props differs from state
    if(JSON.stringify(state) !== JSON.stringify(props.profile)){
      return { ...props.profile }
    }
    // If it doesn't differ do not update state
    return null
  }

  // Do an state initialization
  state = { ...this.props.profile }

  // Prefer componentDidMount -for doing fetch and updating component state
  componentDidMount(){
    const { user, getProfile } = this.props;

    if (user.profile_id) {
      getProfile(user.profile_id);
    }
  }

  render(){
    return (
      <div className="App">
         {/** Render content */}
      </div>
    );
  }
}

Rest spread operator, what is used to fill up state is ES6 syntax.

If you use Babel you might need to add rest spread operator -plugin to your .babelrc -config. https://babeljs.io/docs/en/babel-plugin-proposal-object-rest-spread

score 0 · Accepted Answer · answered Oct 19 '18 at 14:16

1.If you are using redux,I think there is no need to use state to manage date, instead you can use props(redux) to handle all the date in your project. Then,if you want to update the date, you should create action to update the globally unique date that stored in redux.

2.About how to handle the input, when the user have input value, you can create an action, create a copy with the initial state then update state with your input action.

function updateInput(state = initialState, action) {
  switch (action.type) {
  case 'INPUT':
    return Object.assign({}, state, {
    profile_id: action.profile
  })
    return state;
  }
}

How to setState entire object?

2 Answers2