Reducer 函数改变状态，但屏幕不重新渲染

Question

在我使用 Android Studio 设置的 React Native 应用程序中，我使用 redux-persist 来持久化状态，存储引擎是 AsyncStorage。在应用程序中，我有一个“添加”按钮和一个“删除”按钮，用于添加和删除状态中的项目。“添加”按钮工作正常，它将一个项目添加到状态并重新呈现屏幕。但是“删除”按钮虽然从状态中删除了一个项目（我在 React Native Debugger 上看到过），但它不会重新渲染屏幕并保持状态。但是不同版本的代码有效。我想知道为什么以前的版本不起作用。这是我的减速器功能：//reducer.jsimport React from 'react';const initialState = {    key: [        { id: 0 },        { id: 1 }    ]};const reducer = (state = initialState, action) => {    switch (action.type) {        case 'SAVE':            return { key: [...state.key, action.payload] };        // this version doesn't re-render the screen and doesn't persist        case 'REMOVE':            let { key } = state;            key.pop();            return { key };                // this version re-renders the screen and persists        case 'REMOVE':            let { key } = state;            return { key : key.slice(0, key.length - 1)};        default:            return state;    }};export { reducer };

Answer 1

您需要克隆该数组然后修改它，您试图改变原始数组。

.pop()从和的文档中查看.slice()：

slice() 方法将数组的一部分的浅表副本返回到从开始到结束（不包括结束）选择的新数组对象中，其中开始和结束表示该数组中项目的索引。原始数组不会被修改。

pop 方法从数组中删除最后一个元素并将该值返回给调用者。

所以基本上这就是为什么在这种情况下.slice()有效而.pop()无效的原因。

Answer 2

前者不起作用，因为您正在改变数组。

考虑以下片段：

const bla = {

  key: [1, 2]

};

let {

  key

} = bla;

key.pop();

console.log(key);

console.log(bla);

展开片段

const bla = {

  key: [1, 2]

};

let {

  key

} = bla;

console.log(key.slice(0, key.length - 1));

console.log(bla)

请注意如何在修改数组console.log(bla)时记录不同的值，同时创建一个新数组。popslice