时间戳

首页 > 解决方案 > 无法使用不变性助手更新状态

javascript - 无法使用不变性助手更新状态

问题描述

我的状态中有对象，父对象中有嵌套对象，更新状态中的对象可能会导致状态突变，并且建议使用不可变助手的许多答案，（react-addons-update）这是我的状态：

    this.state = {
        room: {
            isOpen: false,
            index: '',
            roomNumber: '',
            reserved: '',
            isLux: null,
            _id: '',
            reserver:{
               name: '',
               surname: '',
               national_id: '',
               customer_number: '',
               staying_til: '',
               _id: ''
            }

        }
    }

这就是更新房间属性的方式：

roomChangeEvent(e){
       update(this.state, {
            room: {
               [e.target.name]: {$set: e.target.value}

            }
       })
}

和储备属性

changeEvent(e){
        update(this.state, {
            room: {
                reserver: {
                  [e.target.name]: {$set: e.target.value}
                }

            }
       })
}

但即使它正在获取值和名称，它也不会更新状态。什么是问题？

标签： javascriptreactjsimmutabilityimmutability-helper

解决方案

我会说，使用immer-js https://immerjs.github.io/immer/docs/produce

这非常简单，无需学习 api，例如immutability-helpers$push、$set 等。

这是他们页面中的示例

import produce from "immer"

const baseState = [
    {
        todo: "Learn typescript",
        done: true
    },
    {
        todo: "Try immer",
        done: false
    }
]

const nextState = produce(baseState, draftState => {
    draftState.push({todo: "Tweet about it"})
    draftState[1].done = true
})

在你的场景中

import produce from "immer"

changeEvent(e){
   this.setState(produce(draftState => {
      draftState.room.reserver[e.target.name] = e.target.value;
   }););
}

推荐阅读