Javascript 在Redux中清除数组状态

如何在Redux中清除数组状态？我有一个空数组的初始状态，并且正在添加内容。我希望有一个只清除它的操作，我尝试了以下方法，但它给了我关于“action.payload”的“Unexpected token”错误，我给了clear\u THINGS操作：

export default (state=[], action) => {
switch (action.type) {
    case "RECEIVE_THING":
        return [
            ...state,
            action.payload
        ];
    case "CLEAR_THINGS":
        return {
            ...state,
            action.payload // payload here is []...
        };
    default:
        return state;
}}

---

如果我只是使用[]而不是通过action.payload，它也会抛出错误。

操作的ES6速记

{thing}

传送到

{"thing": thing}

这会在您的案例中导致语法错误，因为键包含句点，并且不清楚键应该是什么。也许你打算做这样的事

return {
    action: {
        payload: action.payload
    }
}

但这并不能解决当前的问题：如果要通过此操作清除数组，则不应将现有状态扩展到下一个状态。相反，您应该只返回与现有状态形状相同的内容，但在语义上具有空的含义（在本例中，只是一个空数组）。我想你想要的是

case "RECEIVE_THING":
    return [
        ...state,
        action.payload
    ];
case "CLEAR_THINGS":
    return [];

---

您应该在“CLEAR_THINGS”处理程序中返回并清空数组：

因为您只想清除所有内容，而不需要引用现有状态，所以只需要将新状态设置为空数组

另一件值得一提的事情是，我可能会将数组嵌套在一个对象中。如果你的减速机在将来变得更复杂，那么很难像你现在这样添加功能，如果需要的话，这种方法会让你的应用程序变得更复杂。当然，你可以随时添加减速机，但我喜欢用这种方式使减速机更灵活。这看起来像：

export default (state = { myArray: [] }, action) => {
switch (action.type) {
    case "RECEIVE_THING":
        return {
            ...state,
            myArray: state.myArray.concat([action.payload]),
        };
    case "CLEAR_THINGS":
        return {
            ...state,
            myArray: [],
        };
    default:
        return state;
}}

RECEIVE\u THING

操作使用对象扩展表示法返回一个状态，该状态是一个数组（

[]

），其中包含先前的状态（

[…state]

），并向该数组添加一个新项（

[…state，action.payload]

）。用于此新项的键/属性名只是数组的下一个索引。毕竟，它是一个数组

在

CLEAR\u THINGS

的代码中，您正在创建一个对象（

{}

），该对象包含旧状态（假设它是

['item1']

），因此看起来像

{'0'：'item1'}

。接下来，您将继续使用添加更多状态，但这要求您使用单个标识符（单个单词），但您正在使用虚线概念（限定标识符）来访问属性。您在某种程度上指示创建名为

action.payload

的属性，但这是非法的，这就是错误的来源。它在数组中工作的原因是，在这种情况下只需要一个值，因为键是从数组的索引派生的

---

您要做的是始终返回相同类型的对象，在您的情况下，返回一个数组。从

return{

开始，您已经走错了方向。

我在另一个stackoverflow线程上找到了答案

问题是因为函数“map”只能用于数组，不能用于对象

this.props.filtered.map((pic)

到

---

如果不是return[…]而不是return{…}？@aw04，那么它将只在数组中添加“[]”作为新元素。

return[]

应该可以工作，向我们显示您的reducer如果您希望下一个状态为空数组，那么只需返回空数组。

return[]

将使该状态等于您的默认状态。

export default (state=[], action) => {
switch (action.type) {
    case "RECEIVE_THING":
        return [
            ...state,
            action.payload
        ];
    case "CLEAR_THINGS":
        return [];
    default:
        return state;
}}

this.props.filtered.map((pic)

this.props.filtered.filtered.map((pic)