Question

如何清除Redux中的数组状态？我有一个空数组的初始状态，并且正在添加内容。我想要一个只清除它的动作，我尝试了下面的方法，但它给了我＆＃34;意想不到的令牌＆＃34;关于＆＃34; action.payload＆＃34;的错误我给出了CLEAR_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。

，它也会抛出错误

Answer 1

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

RECEIVE_THING操作使用对象扩展表示法来返回包含先前状态（[]）的数组（[...state]）的状态，并向其添加新项（[...state, action.payload] {1}}）。用于此新项的键/属性名称只是数组的下一个索引。毕竟，这是一个数组。

在CLEAR_THINGS的代码中，您正在创建一个包含旧状态的对象（{}）（说它是['item1']），因此它看起来像{ '0': ['item1'] }。接下来，继续使用object shorthand notation添加更多状态，但这需要您使用单个标识符（单个单词），但您使用点状概念（限定标识符）来访问属性。您可以创建一个名为action.payload的名称，但这是非法的，这是您的错误所在。它在数组的情况下工作的原因是因为在这种情况下只需要一个值，因为密钥是从数组的索引派生的。

您要做的是始终返回相同类型的对象，在您的情况下，返回一个数组。从return {开始，您已经走错了路。

Answer 2

ES6操作的简写

{thing}

转化为

{"thing": thing}

这会导致您的情况出现语法错误，因为该键包含句点，并且不清楚键应该是什么。也许你打算这样的事情？

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

但这并不能解决手头的问题：如果要使用此操作清除数组，则不应将现有状态扩展为下一个状态。相反，你应该返回与现有状态相同形状的东西，但在语义上具有空的含义（在这种情况下，只是一个空数组）。我想你想要的是

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

Answer 3

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

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

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

值得一提的另一件事是我可能会将我的数组嵌入到一个对象中。如果您的减速器在未来会变得更加复杂，那么就很难以这种方式添加功能，这种方法可以让您的应用在需要时获得进一步的复杂性。你总是可以添加减速器，但我喜欢这种减速器更灵活。这看起来像是：

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;
}}

Answer 4

我最终在另一个stackoverflow线程上找到答案here。

问题是因为函数“ map”只能用于数组，而不能用于对象。因此，在我的图片组件中，我必须进行更改

this.props.filtered.map((pic)

到

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

清除Redux中的数组状态

4 个答案: