업데이트와 함께 개체 setState 에 반응할

은 그것에 가능한 모든 업데이트 object's 의 속성으로 setState?

다음과 같습니다.

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

가: 

this.setState({jasper.name: 'someOtherName'});

이:

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

첫 번째 결과는 구문에 오류가 두 번째는 그냥 아무것도하지 않습니다. 어떤 아이디어가?

GalAbra
편집된 질문5일 7월 2019 в 3:44
프로그래밍
state reactjs
26일 4월 2017 в 3:47
12 파운드
질문에 대한 의견 (1)
해결책

의 여러 가지 방법이 있습니다 이 일을,이후 상태 업데이트비동기업,그래서를 업데이트 상태의 개체,우리는 우리를 사용할 필요가업데이터 함수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
})

를 사용하는 대신개체입니다.당우리는 또한 write it like this:

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

2-를 사용하여[확산 연산자]3:

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

참고:개체입니다.지정및`확산 연산자를 만듭얕은 복사,그래서 만약 당신이 정의 중첩된 개체는 개체의 배열을,당신은 필요한 다른 방법으로 접근하고 있습니다.

업데이트 상태의 중첩 개체:

가 정의한 상태:

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'
    }
  ]
}

를 업데이트 상태의 어떤 일체,실행 지도에 배열 및 확인에 대한 몇 가지 독특한 각각의 가치를 객체의 경우에는상태=true 스,새로운 객체를 업데이트 값을 다른 동일한 개체입니다.

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

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

}))

의 제안:는 경우 객체지 않't 는 독특한 가치,다음 사용하 배열 색인.

Mayank Shukla
편집된 답변3일 6월 2019 в 11:32
해설 (11)

이것은 가장 빠르고 가장 읽을 수 있는 방법:

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

는 경우에도이다.상태입니다.재스퍼이 이미 포함되어 이름의 재산,새로운 이름은이름:'someothername'으로 사용됩니다.

Tim Gerhard
편집된 답변17일 10월 2019 в 3:44
해설 (1)

사용 확산 연산자 및 일부 ES6 기

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

내가 사용하는 이 솔루션입니다.

이 있는 경우에는 중첩된 상태는 다음과 같다: 다.state={ formInputs:{ friendName:{ 값:'', isValid:false, errorMsg:'' }, friendEmail:{ 값:'', isValid:false, errorMsg:'' } } } 당신이 선언할 수 있습 handleChange 기능은 해당 복사본은 현재 상태 및 재 할당으로 변경된 값

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

여기에는 html 이벤트에 청취자 수 있습니다. 사용할 수 있는지 확인하십시오 같은 이름으로 사용되는 주체(이 경우에는'friendName')

<input type="text" onChange={this.handleChange} " name="friendName" />
ravibagul91
편집된 답변15일 9월 2019 в 11:43
해설 (0)

이 시도는,그것이 잘 작동해야

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

첫 번째 사건은 실제로는 구문 오류가 있습니다.

이후 나는't 시의 나머지의 구성 요소,그's 하는 이유를 참조하십시오'다시 중첩에서 객체의 상태는 여기에. It's 지 않는 좋은 생각이 중첩체에서 구성 요소 상태가 됩니다. 도 설정을 초기 상태:

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

는 방법,업데이트 할 경우 이름을,당신은 단지 전화:

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

는 것이 무엇을 달성'다시 목표로 하는가?

에 대한 더 크고,더 복잡한 데이터 저장,무언가를 사용하는 것이 같은 돌아오. 그러나는's 훨씬 더 많은 고급합니다.

일반적인 원칙으로 구성 요소 상태를 사용하는 것에만 관리 UI 구성 요소의 상태(예:active,타이머,etc.)

다음 사이트를 참조하십시오:

-https://facebook.github.io/react/docs/react-component.html#state -https://facebook.github.io/react/docs/state-and-lifecycle.html

해설 (2)

또 다른 옵션:정의하는 변수의재스퍼개체고 그냥 부르는 변수입니다.

확산 연산자:ES6

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

let foo = "something that needs to be saved into state" 

this.setState(prevState => ({
    jasper: {
        ...jasper.entity,
        foo
    }
})
해설 (1)

내가 알고있는 대답을 많이 여기에,그러나 나는'm 놀라게 그들의 아무도의 복사본을 만들고 새로운 객체의 외부 setState,그리고 단순히 setState({newObject}). 깨끗하고 간결하고 신뢰할 수 있습니다. 그래서 이 경우는 다음과 같습니다.

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

또한 동적 재산(매우 유용한 형태)

const 재스퍼={...다.상태입니다.재스퍼,[VarRepresentingPropertyName]:'새로운 가치'} 다.setState(출하고 다시 쓰게=>({재스퍼}))

해설 (0)

당신이 시도할 수 있습을 표시해야 합니다.

this.setState(prevState => {
   prevState = JSON.parse(JSON.stringify(this.state.jasper));
   prevState.name = 'someOtherName';
   return {jasper: prevState}
})

또 다른 속성:

this.setState(prevState => {
   prevState = JSON.parse(JSON.stringify(this.state.jasper));
   prevState.age = 'someOtherAge';
   return {jasper: prevState}
})

할 수 있습니다 또는 사용 handleChage 기능:

handleChage(event) {
   const {name, value} = event.target;
    this.setState(prevState => {
       prevState = JSON.parse(JSON.stringify(this.state.jasper));
       prevState[name] = value;
       return {jasper: prevState}
    })
}

HTML 코드:

<input 
   type={"text"} 
   name={"name"} 
   value={this.state.jasper.name} 
   onChange={this.handleChange}
/>
<br/>
<input 
   type={"text"} 
   name={"age"} 
   value={this.state.jasper.age} 
   onChange={this.handleChange}
/>
해설 (1)

를 시도 할 수 있습니다 이: (****참고:이름을 입력 tag===필드의 객체) `` <input name="유사"type="text" value={this.상태입니다.myObject.유사} onChange={this.handleChangeInpForm}>

ravibagul91
편집된 답변15일 9월 2019 в 11:44
해설 (1)

간단한 동적 방법입니다.

이 일을 할 것입니다,하지만 당신은 설정할 필요가 모든 id 를 부모 그래서 부모의 이름을 가리키는 개체되고,id="jasper"그리고 이름을 입력 요소의 이름=는 시설 내에는 개체의 jasper.

handleChangeObj = ({target: { id , name , value}}) => this.setState({ [id]: { ...this.state[id] , [name]: value } });
Alejandro Sánchez Durán
편집된 답변30일 3월 2019 в 10:44
해설 (0)

없이 사용하는 비동기와 기다리고 이것을 사용...

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

당신이 당신과 함께 사용하는 비동기와 기다리고 이것을 사용...

async funCall(){
      await this.setState({...this.state.jasper, name: 'someothername'});
}
해설 (0)

또한,다음과 같은 알베르토 Piras 솔루션,지 않는 경우't 복사하려는 모든"상"체:

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

    let jasperCopy = Object.assign({}, this.state.jasper);
    jasperCopy[inputName].name = inputValue;

    this.setState({jasper: jasperCopy});
  }
해설 (0)

이것은 다른 솔루션을 사용하여immerimmutabe 유틸리티,매우 적합합을 위한 중첩된 객체로 용이해야 합니다 걱정하지 않을 돌연변이 

this.setState(
    produce(draft => {
       draft.jasper.name = 'someothername
    })
)
ravibagul91
편집된 답변15일 9월 2019 в 11:44
해설 (0)