상태 업데이트는 비동기 작업 이므로 여러 가지 방법이 있으므로 상태 객체를 업데이트하려면 업데이터 함수를와 함께 사용해야 합니다setState .

1- 가장 간단한 것 :

먼저 사본을 jasper만든 다음 다음과 같이 변경하십시오.

this.setState(prevState => {
  let jasper = Object.assign({}, prevState.jasper);  // creating copy of state variable jasper
  jasper.name = 'someothername';                     // update the name property, assign a new value                 
  return { jasper };                                 // return new object jasper object
})

사용하는 대신 Object.assign다음과 같이 작성할 수도 있습니다.

let jasper = { ...prevState.jasper };

2- 스프레드 연산자 사용 :

this.setState(prevState => ({
    jasper: {                   // object that we want to update
        ...prevState.jasper,    // keep all other key-value pairs
        name: 'something'       // update the value of specific key
    }
}))

참고 : Object.assign 및 Spread Operator단지 생성 얕은 사본을 중첩 된 객체 또는 객체의 배열을 정의 그렇다면, 당신은 다른 접근 방식이 필요합니다.

중첩 된 상태 객체 업데이트 :

상태를 다음과 같이 정의했다고 가정하십시오.

this.state = {
  food: {
    sandwich: {
      capsicum: true,
      crackers: true,
      mayonnaise: true
    },
    pizza: {
      jalapeno: true,
      extraCheese: false
    }
  }
}

피자 개체의 extraCheese를 업데이트하려면 :

this.setState(prevState => ({
  food: {
    ...prevState.food,           // copy all other key-value pairs of food object
    pizza: {                     // specific object of food object
      ...prevState.food.pizza,   // copy all pizza key-value pairs
      extraCheese: true          // update value of specific key
    }
  }
}))

객체 배열 업데이트 :

할 일 앱이 있고 다음 형식으로 데이터를 관리한다고 가정합니다.

this.state = {
  todoItems: [
    {
      name: 'Learn React Basics',
      status: 'pending'
    }, {
      name: 'Check Codebase',
      status: 'pending'
    }
  ]
}

할 일 객체의 상태를 업데이트하려면 배열에서 맵을 실행하고 각 객체의 고유 한 값을 확인하십시오.의 경우 condition=true업데이트 된 값을 가진 새 객체를 반환하고 그렇지 않으면 동일한 객체를 반환하십시오.

let key = 2;
this.setState(prevState => ({

  todoItems: prevState.todoItems.map(
    el => el.key === key? { ...el, status: 'done' }: el
  )

}))

제안 : 객체에 고유 한 값이 없으면 배열 색인을 사용하십시오.

답변

this.setState({...this.state.jasper, name: 'someothername'});

this.setState({
    jasper: {
          ...this.state.jasper,
          name: 'something'
    }
})

this.state = {
  formInputs:{
    friendName:{
      value:'',
      isValid:false,
      errorMsg:''
    },
    friendEmail:{
      value:'',
      isValid:false,
      errorMsg:''
    }
  }
}

handleChange(el) {
    let inputName = el.target.name;
    let inputValue = el.target.value;

    let statusCopy = Object.assign({}, this.state);
    statusCopy.formInputs[inputName].value = inputValue;

    this.setState(statusCopy);
  }

<input type="text" onChange={this.handleChange} " name="friendName" />

const jasper = { ...this.state.jasper, name: 'someothername' }
this.setState(() => ({ jasper }))

const jasper = { ...this.state.jasper, [VarRepresentingPropertyName]: 'new value' }
this.setState(() => ({ jasper }))

this.setState(Object.assign(this.state.jasper,{name:'someOtherName'}));

this.state = {
  name: 'jasper',
  age: 28
}

this.setState({
  name: 'Sean'
});