Question

我正在构建一个日历应用。我在嵌套结构中设置状态。我想在嵌套结构中添加一个项目。我不确定如何在Redux中执行此操作。

这是我的initialState：

export const initialState = {
    modalActivated: false, 
    modalContent: null,
    days: [
        {
            day: 'Sunday', 
            slots: [
                {time: '12:00am', events: []}, {time: '1:00am', events: []}, {time: '2:00am', events: []}, {time: '3:00am', events: []}, 
                {time: '4:00am', events: []}, {time: '5:00am', events: []}, {time: '6:00am', events: []}, {time: '7:00am', events: []}, 
                {time: '8:00am', events: []}, {time: '9:00am', events: []}, {time: '10:00am', events: []}, {time: '11:00am', events: []}, 
                {time: '12:00pm', events: []}, {time: '1:00pm', events: []}, {time: '2:00pm', events: []}, {time: '3:00pm', events: []}, 
                {time: '4:00pm', events: []}, {time: '5:00pm', events: []}, {time: '6:00pm', events: []}, {time: '7:00pm', events: []}, 
                {time: '8:00pm', events: []}, {time: '9:00pm', events: []}, {time: '10:00pm', events: []}, {time: '11:00pm', events: []}, 
            ]
        },
        {
            day: 'Monday', 
            slots: [
                {time: '12:00am', events: []}, {time: '1:00am', events: []}, {time: '2:00am', events: []}, {time: '3:00am', events: []}, 
                {time: '4:00am', events: []}, {time: '5:00am', events: []}, {time: '6:00am', events: []}, {time: '7:00am', events: []}, 
                {time: '8:00am', events: []}, {time: '9:00am', events: []}, {time: '10:00am', events: []}, {time: '11:00am', events: []}, 
                {time: '12:00pm', events: []}, {time: '1:00pm', events: []}, {time: '2:00pm', events: []}, {time: '3:00pm', events: []}, 
                {time: '4:00pm', events: []}, {time: '5:00pm', events: []}, {time: '6:00pm', events: []}, {time: '7:00pm', events: []}, 
                {time: '8:00pm', events: []}, {time: '9:00pm', events: []}, {time: '10:00pm', events: []}, {time: '11:00pm', events: []}, 
            ]
        },
        {
            day: 'Tuesday', 
            slots: [
                {time: '12:00am', events: []}, {time: '1:00am', events: []}, {time: '2:00am', events: []}, {time: '3:00am', events: []}, 
                {time: '4:00am', events: []}, {time: '5:00am', events: []}, {time: '6:00am', events: []}, {time: '7:00am', events: []}, 
                {time: '8:00am', events: []}, {time: '9:00am', events: []}, {time: '10:00am', events: []}, {time: '11:00am', events: []}, 
                {time: '12:00pm', events: []}, {time: '1:00pm', events: []}, {time: '2:00pm', events: []}, {time: '3:00pm', events: []}, 
                {time: '4:00pm', events: []}, {time: '5:00pm', events: []}, {time: '6:00pm', events: []}, {time: '7:00pm', events: []}, 
                {time: '8:00pm', events: []}, {time: '9:00pm', events: []}, {time: '10:00pm', events: []}, {time: '11:00pm', events: []}, 
            ]
        },
        {
            day: 'Wednesday', 
            slots: [
                {time: '12:00am', events: []}, {time: '1:00am', events: []}, {time: '2:00am', events: []}, {time: '3:00am', events: []}, 
                {time: '4:00am', events: []}, {time: '5:00am', events: []}, {time: '6:00am', events: []}, {time: '7:00am', events: []}, 
                {time: '8:00am', events: []}, {time: '9:00am', events: []}, {time: '10:00am', events: []}, {time: '11:00am', events: []}, 
                {time: '12:00pm', events: []}, {time: '1:00pm', events: []}, {time: '2:00pm', events: []}, {time: '3:00pm', events: []}, 
                {time: '4:00pm', events: []}, {time: '5:00pm', events: []}, {time: '6:00pm', events: []}, {time: '7:00pm', events: []}, 
                {time: '8:00pm', events: []}, {time: '9:00pm', events: []}, {time: '10:00pm', events: []}, {time: '11:00pm', events: []}, 
            ]
        },
        {
            day: 'Thursday', 
            slots: [
                {time: '12:00am', events: []}, {time: '1:00am', events: []}, {time: '2:00am', events: []}, {time: '3:00am', events: []}, 
                {time: '4:00am', events: []}, {time: '5:00am', events: []}, {time: '6:00am', events: []}, {time: '7:00am', events: []}, 
                {time: '8:00am', events: []}, {time: '9:00am', events: []}, {time: '10:00am', events: []}, {time: '11:00am', events: []}, 
                {time: '12:00pm', events: []}, {time: '1:00pm', events: []}, {time: '2:00pm', events: []}, {time: '3:00pm', events: []}, 
                {time: '4:00pm', events: []}, {time: '5:00pm', events: []}, {time: '6:00pm', events: []}, {time: '7:00pm', events: []}, 
                {time: '8:00pm', events: []}, {time: '9:00pm', events: []}, {time: '10:00pm', events: []}, {time: '11:00pm', events: []}, 
            ]
        },
        {
            day: 'Friday', 
            slots: [
                {time: '12:00am', events: []}, {time: '1:00am', events: []}, {time: '2:00am', events: []}, {time: '3:00am', events: []}, 
                {time: '4:00am', events: []}, {time: '5:00am', events: []}, {time: '6:00am', events: []}, {time: '7:00am', events: []}, 
                {time: '8:00am', events: []}, {time: '9:00am', events: []}, {time: '10:00am', events: []}, {time: '11:00am', events: []}, 
                {time: '12:00pm', events: []}, {time: '1:00pm', events: []}, {time: '2:00pm', events: []}, {time: '3:00pm', events: []}, 
                {time: '4:00pm', events: []}, {time: '5:00pm', events: []}, {time: '6:00pm', events: []}, {time: '7:00pm', events: []}, 
                {time: '8:00pm', events: []}, {time: '9:00pm', events: []}, {time: '10:00pm', events: []}, {time: '11:00pm', events: []}, 
            ]
        },
        {
            day: 'Saturday', 
            slots: [
                {time: '12:00am', events: []}, {time: '1:00am', events: []}, {time: '2:00am', events: []}, {time: '3:00am', events: []}, 
                {time: '4:00am', events: []}, {time: '5:00am', events: []}, {time: '6:00am', events: []}, {time: '7:00am', events: []}, 
                {time: '8:00am', events: []}, {time: '9:00am', events: []}, {time: '10:00am', events: []}, {time: '11:00am', events: []}, 
                {time: '12:00pm', events: []}, {time: '1:00pm', events: []}, {time: '2:00pm', events: []}, {time: '3:00pm', events: []}, 
                {time: '4:00pm', events: []}, {time: '5:00pm', events: []}, {time: '6:00pm', events: []}, {time: '7:00pm', events: []}, 
                {time: '8:00pm', events: []}, {time: '9:00pm', events: []}, {time: '10:00pm', events: []}, {time: '11:00pm', events: []}, 
            ]
        }
    ]
}

如果我有一天，时间，事件标题，我如何使用Object.assign编辑当前结构并将单个字符串（标题）添加到相应的事件数组？我一直使用Object.assign，但不使用像这样的嵌套值。

任何帮助将不胜感激！

Answer 1

initialState.days.forEach(dayObject => {
  if(dayObject.day == 'Sunday') dayObject = {...dayObject,title: 'someTitle'}

  console.log(dayObject);    
})

上面的代码将循环通过您当前的state，找到您希望将标题推入的特定对象，在这种情况下为Sunday，使用天数获取对象的所有属性：sunday和推送新属性title

Redux - 添加到嵌套状态

1 个答案: