如何将两个对象合并为一个 - React-Native 状态答案

【问题标题】：How do I concat two objects into one - React-Native state如何将两个对象合并为一个 - React-Native 状态
【发布时间】：2018-12-29 17:44:55
【问题描述】：

这里有两个对象，一个是创建页面加载，另一个是我想在按钮单击时添加到当前状态

constructor(props){
    super(props);
    this.state = {
        marked: null,
        tempMarkedDates: [],
    }
    this.toggle = this.toggle.bind(this);
}


// First object into marked is like

console.log(JSON.stringify(this.state.marked));

Output ::

[
    {
        "2019-01-02":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2019-01-04":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2019-01-08":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2018-12-29":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2018-11-27":{
            "disabled":true,"selected":true,"selectedColor":"#fc3232"
        },
    }
]

根据我自己的回答 here 处理堆栈溢出

//Now I am creating new object like

day = "2019-01-10"
let obj = {};
obj[day] = {
    disabled: true, 
    selected: true, 
    selectedColor: '#fc3232'
}

//So the output will be

[
    {
        "2018-12-30":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        }
    }
]

我想合并对象并更新 this.state.marked

并且它应该在连接后仍然是对象，而我的代码正在将其更改为数组

Desire Output - Need to join last or first date object of 30-12-2018
[
    {
        "2019-01-02":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2019-01-04":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2019-01-08":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2018-12-29":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2018-11-27":{
            "disabled":true,"selected":true,"selectedColor":"#fc3232"
        },
        "2018-12-30":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        }
    }
]

所以需要你的帮助来连接 React 本机状态的两个对象。

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

我们可以使用javascript的assign()方法。

参考：https://stackoverflow.com/a/51143342/3449578

let newstate = Object.assign(obj , this.state.marked[0])

this.setState({marked: newstate });

【讨论】：

你好 Ashok，这会从状态中删除我的旧值
你需要在值改变后设置状态。看了我更新的答案
var s = Object.assign(obj , this.state.marked[0]); this.setState({ marked: s }) 这会清除我在标记状态下的旧值
您是否更改了问题中描述的任何内容？ Bcz 根据您的代码，这可能会奏效。
不，我没有改变任何东西

【解决方案2】：

您可以在this.setState 中使用... 扩展运算符：

var obj =  {
        "2019-01-02":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2019-01-04":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2019-01-08":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2018-12-29":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2018-11-27":{
            "disabled":true,"selected":true,"selectedColor":"#fc3232"
        },
    }
    
        console.log(obj)
    
    var s = {...obj, 
        "2018-12-30":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        }
    }
    
    console.log(s)

在 React 中你可以这样做：

this.setState({ marked: {...this.state.marked, "2018-12-30":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
}})

【讨论】：

谢谢@HarishSoni，你能告诉我如何将其更新为 state 吗？ var s = { ...this.state.marked, obj}; this.setState({ marked: s}); 这样的东西对吗？
是的，这行得通。让我知道您的问题是否已解决。如果有，请将其标记为答案，并为我的努力点赞
感谢 ADAVANCE：
得到想要的结果了吗？
不，我仍然没有得到我想要的响应

【解决方案3】：

这就是我的反应方式。使用setState 保持整个状态并使用新值更新标记。

只需向 handleMarked 函数提供值即可更新状态。并删除 day 和 value 的虚拟值。

constructor(props) {
  super(props);
  this.state = {
    marked: {},
    tempMarkedDates: [],
  }
  this.toggle = this.toggle.bind(this);
}

handleMarked = (day, value) => {

  /* Provide values to function params above and delete dummy values below */
  day = '2019-01-10';
  value = {
    disabled: true,
    selected: true,
    selectedColor: '#fc3232'
  }

  this.setState({
    ...this.state,
    marked: {
      ...this.state.marked,
      [day]: value
    }
  },
    () => console.log(JSON.stringify(this.state.marked))
  );
}

【讨论】：