如何让传播运算符使用 React 更新 state

Question

I've defined my initial state in a Component as follows:

constructor(props) {
    super(props);
    //this.state = {count: props.initialCount};
    this.state = {
        timeArray: [],
        metawords: '',
        description: '',
        currentTime: '',
        inputFieldsDisabled: true
    }
}

I have an event that gets called and I want to just update the metawords property. I was thinking that the following code should work but it does not.

updateInputValue1(evt) {
    const newMetawords = "abcd";
    this.setState(
        [...this.state,{
            metawords: evt.target.value
        }]
    );

Thoughts?

Answer 1

state is an object so updating it the way you are at the moment won't work.

You can simply update only the property you need as:

this.setState({
  metawords: evt.target.value,
})

Since you've mentioned spread operator, you can also (but not always necessary) update your state as:

this.setState({
  ...this.state,
  metawords: evt.target.value,
})

or

this.setState(prevState => ({
  ...prevState,
  metawords: evt.target.value,
}))

Should you need more info about it, I recommend you to have a look at ReactJS documentation .

Answer 2

You can use spread operator like this to setState.

this.setState(
        {...this.state,
          metawords: evt.target.value
        })

However since you only want to change a single property, this will also work in your case:

this.setState({metawords: evt.target.value})

Answer 3

Why not simply:

this.setState({ metawords: evt.target.value })

You don't need to pass all other state values, just pass the property and the new value, that you want to update. You don't need to bother about the other state values during setState, React will do the merging (merging of all other state values and the state that you wants to update).

For more details check DOC .

Answer 4

What is wrong in this code.How to update that state....

add = () => {
            const count = 0;
            this.state.videoLinks.forEach((item,index)=>{
                if(item.length===0){
                    count = 1;
                    // this.setState({...state, error: `Please fill the URL row${index+1}`});
                    this.setState(prevState => ({
                        ...prevState,
                        error: `Please fill the URL row${index+1}`
                      }))
                    return;
                }
            });
            if(count===0){
                // this.setState({ ...state, videoLinks: [...this.state.videoLinks].concat('') });
                this.setState(prevState => ({
                    ...prevState,
                    videoLinks: [...this.state.videoLinks].concat('')
                  }));
            }
            
        };