Javascript React Redux：如何在reducer中正确返回可迭代数组？

我在React Redux中工作，我试图从我的reducer中的一个简单数组返回一个值。以下是我的简短文件：

App.js

let arr = [{"name": "Matthew"}];

function App() {
    const dispatch = useDispatch();
    dispatch(action1(arr));

    return(
        <div>
            <List />
        </div>
    );
}

function List(){
    const val = useSelector(getVals);

    return(
        <div>
            {val}
        </div>
    )
}

export function action1(arr){
    return { type: ADD_STORE, arr};
}

function AddToStore(state = [], action){
    switch(action.type){
        case ADD_STORE:
            return [...action.name, ...state];
    }
}

export default AddToStore;

Reducer.js

let arr = [{"name": "Matthew"}];

function App() {
    const dispatch = useDispatch();
    dispatch(action1(arr));

    return(
        <div>
            <List />
        </div>
    );
}

function List(){
    const val = useSelector(getVals);

    return(
        <div>
            {val}
        </div>
    )
}

export function action1(arr){
    return { type: ADD_STORE, arr};
}

function AddToStore(state = [], action){
    switch(action.type){
        case ADD_STORE:
            return [...action.name, ...state];
    }
}

export default AddToStore;

---

这给了我一个错误“对象不可编辑”。为什么？如果我只传递一个字符串而不是一个数组，例如“Matthew”，我可以通过返回[…action，…state]很好地打印出来。

它不起作用，因为在您的商店中，您试图返回一个数组而不是一个对象。有关redux主体的更多信息，请参见：

App.js

let objNames = {names: [{"name": "Matthew"}]};

function App() {
    const dispatch = useDispatch();
    dispatch(action1(arr));

    return(
        <div>
            <List />
        </div>
    );
}

---

并将action.js更改为传入objNames而不是arr。

如reducer的初始状态所示，

state=[]

，它是一个数组，因此返回的是一个数组。