Question

我对象的初始状态是 { “值”：””， “标签”：”” }

一旦我调用了API，我就会得到响应 [ { “_id”： “234234234”， “名”： “XYZ” }， { “_id”： “345345345”， “名”： “adwwd” } ]

我希望输出状态看起来像这样 [{ “值”： “XYZ”， “标签”： “XYZ”}，{ “值”： “adwwd”， “标签”： “adwwd”}]

现在我如何使用响应中的值更新我的状态而不改变它？

Answer 1

您将箭头函数返回值放在{}内，这意味着它被执行，就像function(){ ... }一样。要退回，您需要添加return，例如.map( item => { return ... } )。或者，如果您想使用箭头功能简写，您可以通过将对象放在括号中来返回对象，如下所示：item => ({ value:..., label:... })。这意味着您不需要使用Object.assign，除非您想要包含_id和name。

此外，您使用了item和items，这可能会导致问题。

把它放在一起：

return response.map(item=>({ value:item.name, label:item.name }))
// returns `[{"value":"xyz","label":"xyz"},{"value":"adwwd","label":"adwwd"}]`

Answer 2

假设你想将api响应存储在你所在状态的另一个属性data中，你可以这样做：

...
case RECEIVED_RESPONSE:
    return {
        ...state,
        data: [
            ...state.data,
            ...action.payload
        ]
    }
...

注意：这需要支持数组和对象传播，如果您只是编写es5，那么以下功能相同：

...
case RECEIVED_RESPONSE:
    return Object.assign({}, state, {
        data: state.data.concat(action.payload)
    }
...

更多信息：可以在Redux文档中找到不可变更新模式 - http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html

替换数组项而不在javascript中进行变异

2 个答案: