Immutable.js - 将值添加/更新到嵌套在地图中的列表中

Im using Immutable.js to try to add objects into lists that are nested in an object. Ive been able to get my first function handleRecieveLeads() to work to set the leads passed in. My second function handleSaveLeads() is not working properly.

我使用Immutable.js尝试将对象添加到嵌套在对象中的列表中。我已经能够得到我的第一个函数handleRecieveLeads()来设置传入的引导。我的第二个函数handleSaveLeads()无法正常工作。

From what I can see so far by logging things out is that the new item that is being pushed into that Immutable List is being over written. So when I log it to the console you only see the last item that was pushed and the one that was there before is gone. Heres a link to JS Bin: https://jsbin.com/fugajofaxi/edit?js,console

从目前为止我所看到的东西是通过记录出来的东西是被推入到不可变列表中的新项目正在被覆盖。因此,当我将其记录到控制台时,您只能看到推送的最后一个项目,之前的项目已经消失。下面是JS Bin的链接:https://jsbin.com/fugajofaxi/edit?js,console

//Initial state
var state = Immutable.Map();

//sample lead
var leads = [{document_id: "L4234234234234",
              company_name: "someComp",
              date_filed:"083815",
              address:"11111 sw 123 ave",
              first_name: "john",
              last_name: "doe"
             },
             {document_id: "L11111111",
              company_name: "CorpComp",
              date_filed:"091919", 
              address:"22222 sw 456 Ave",
              first_name: "jane",
              last_name: "doe"
             }];

//Adds the new leads to the state
function handleRecieveLeads (state, leads) {
    var newState = state.set('leads', Immutable.List(leads));
    return console.log(newState.toJS());
}

handleRecieveLeads(state, leads);

//sample lead to save
var saveLeads = [{document_id: "L1919191919",
                  company_name: "someComp2",
                  date_filed:"083815",
                  address:"33333 SW 333rd Ave",
                  first_name: "dallas",
                  last_name: "thomas"
                 }];

//add leads to the savedLeads
function handleSaveLead (state, lead) {
    if(!state.savedLeads) {
        var newState = state.set('savedLeads', Immutable.List(lead));
        return console.log(newState.toJS());
    } else {
        var newState2 = state.get('savedLeads').push(lead);
        return console.log(newState2.toJS());
    }
}
//sample lead to save 2
var saveLeads2 = [{document_id: "L16161616",
                   company_name: "someComp3",
                   date_filed:"083815",
                   address:"444444 sw 555 Ave",
                   first_name: "crystal",
                   last_name: "mentos"
                  }];

handleSaveLead(state, saveLeads);

//setting a new initial state
var state2 = Immutable.fromJS({leads:leads, savedLeads: saveLeads});

handleSaveLead(state2, saveLeads2);

1 个解决方案

#1

Several things going on here. First you never return the new 'modified' states from your handlers.

这里发生了几件事。首先,您永远不会从处理程序返回新的“已修改”状态。

Second, state.savedLeads is always undefined. Use state.get('savedLeads') instead

其次,state.savedLeads总是未定义的。请改用state.get('savedLeads')

Third, when you use state.get('savedLeads') and push the new item you want to set it in the state and return the new state from that.

第三,当您使用state.get('savedLeads')并推送新项目时,您希望将其设置为状态并从中返回新状态。

Here, try this:

在这里,试试这个:

//Initial state
var state = Immutable.Map();

//sample lead
var leads = [{document_id: "L4234234234234",
              company_name: "someComp",
              date_filed:"083815",
              address:"11111 sw 123 ave",
              first_name: "john",
              last_name: "doe"
             },
             {document_id: "L11111111",
              company_name: "CorpComp",
              date_filed:"091919", 
              address:"22222 sw 456 Ave",
              first_name: "jane",
              last_name: "doe"
             }];

//Adds the new leads to the state
function handleRecieveLeads (state, leads) {
    return state.set('leads', Immutable.List(leads));
}

var newState = handleRecieveLeads(state, leads);
console.log(newState.toJS())

//sample lead to save
var saveLeads = [{document_id: "L1919191919",
                  company_name: "someComp2",
                  date_filed:"083815",
                  address:"33333 SW 333rd Ave",
                  first_name: "dallas",
                  last_name: "thomas"
                 }];

//add leads to the savedLeads
function handleSaveLead (state, lead) {
    if(!state.get('savedLeads')) {
       return state.set('savedLeads', Immutable.List(lead));
    } else {
       var savedLeads = state.get('savedLeads');
       return state.set('savedLeads', savedLeads.push(lead));
    }
}
//sample lead to save 2
var saveLeads2 = [{document_id: "L16161616",
                   company_name: "someComp3",
                   date_filed:"083815",
                   address:"444444 sw 555 Ave",
                   first_name: "crystal",
                   last_name: "mentos"
                  }];

var newState2 = handleSaveLead(newState, saveLeads);
console.log(newState2.toJS())

var newState3 = handleSaveLead(newState2, saveLeads2);
console.log(newState3.toJS())

#1