เป็นไปได้หรือไม่ที่จะอัพเดทคุณสมบัติของวัตถุด้วยsetState?

สิ่งที่ต้องการ:

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

ฉันเหนื่อย:

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

และนี่:

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

ผลลัพธ์แรกในข้อผิดพลาดทางไวยากรณ์และข้อที่สองไม่ทำอะไรเลย ความคิดใด ๆ

มีหลายวิธีการทำเช่นนี้จะมีตั้งแต่การปรับปรุงรัฐคือการดำเนินงาน asyncเพื่อที่จะปรับปรุงวัตถุรัฐเราต้องใช้อัพเดทฟังก์ชั่น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
    }
  }
}

ในการอัปเดตชีสชีสของวัตถุพิเศษให้ทำดังนี้

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.state.jasperมีคุณสมบัติชื่อแล้ว แต่ชื่อใหม่นั้นname: 'someothername'จะถูกใช้

ใช้สเปรดโอเปอเรเตอร์และ ES6 บางตัวที่นี่

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

ฉันใช้วิธีนี้

หากคุณมีสถานะซ้อนอยู่เช่นนี้

this.state = {
  formInputs:{
    friendName:{
      value:'',
      isValid:false,
      errorMsg:''
    },
    friendEmail:{
      value:'',
      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" />

ฉันรู้ว่ามีคำตอบมากมายที่นี่ แต่ฉันไม่แปลกใจเลยที่พวกเขาจะสร้างสำเนาของวัตถุใหม่นอก setState แล้วก็ setState ({newObject}) สะอาดกระชับและเชื่อถือได้ ดังนั้นในกรณีนี้:

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

สิ่งนั้นจะบรรลุเป้าหมายที่คุณตั้งไว้หรือไม่

สำหรับแหล่งข้อมูลขนาดใหญ่ที่ซับซ้อนกว่านี้ฉันจะใช้ Redux แต่นั่นเป็นขั้นสูงมากขึ้น

กฎทั่วไปพร้อมสถานะส่วนประกอบคือใช้เพื่อจัดการสถานะ UI ของส่วนประกอบเท่านั้น (เช่นใช้งาน, ตัวจับเวลา, ฯลฯ )

ตรวจสอบข้อมูลอ้างอิงเหล่านี้:

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

ตัวเลือกอื่น: กำหนดตัวแปรของคุณออกจากวัตถุแจสเปอร์แล้วเรียกตัวแปร

ตัวดำเนินการสเปรด: 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
    }
})

วิธีที่ง่ายและมีชีวิตชีวา

สิ่งนี้จะทำงาน แต่คุณต้องตั้งรหัสทั้งหมดให้กับผู้ปกครองดังนั้นผู้ปกครองจะชี้ไปที่ชื่อของวัตถุเป็น id = "jasper" และตั้งชื่อชื่อขององค์ประกอบอินพุต = คุณสมบัติภายในของวัตถุแจสเปอร์ .

handleChangeObj = ({target: { id , name , value}}) => this.setState({ [id]: { ...this.state[id] , [name]: value } });

คุณสามารถลองกับสิ่งนี้ : ( หมายเหตุ : ชื่อของแท็กอินพุต === ฟิลด์ของวัตถุ)

<input name="myField" type="text" 
      value={this.state.myObject.myField} 
     onChange={this.handleChangeInpForm}>
</input>

-----------------------------------------------------------
handleChangeInpForm = (e) => {
   let newObject = this.state.myObject;
   newObject[e.target.name] = e.target.value;
   this.setState({
     myObject: newObject 
   })
}

นี่เป็นอีกวิธีหนึ่งในการใช้ยูทิลิตี้immer immutabe ซึ่งเหมาะอย่างยิ่งสำหรับวัตถุที่ซ้อนกันอย่างง่ายดายและคุณไม่ควรสนใจเกี่ยวกับการกลายพันธุ์

this.setState(
    produce(draft => {
       draft.jasper.name = 'someothername
    })
)

นอกจากนี้ให้ทำตามวิธีของ Alberto Piras หากคุณไม่ต้องการคัดลอกวัตถุ "state" ทั้งหมด:

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

คุณสามารถลองกับสิ่งนี้:

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

โดยไม่ใช้ Async และ Await ใช้สิ่งนี้ ...

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

หากคุณใช้กับ Async และ Await ใช้สิ่งนี้ ...

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

การตั้งค่านี้ใช้งานได้สำหรับฉัน:

let newState = this.state.jasper;
newState.name = 'someOtherName';

this.setState({newState: newState});

console.log(this.state.jasper.name); //someOtherName