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

Question

在我使用 Android Studio 设置的 React Native 应用程序中，我使用 redux-persist 来持久化状态，存储引擎是 AsyncStorage。在应用程序中，我有一个“添加”按钮和一个“删除”按钮，用于添加和删除状态中的项目。

“添加”按钮工作正常，它将一个项目添加到状态并重新呈现屏幕。但是“删除”按钮虽然从状态中删除了一个项目（我在 React Native Debugger 上看到过），但它不会重新渲染屏幕并保持状态。但是不同版本的代码有效。

我想知道为什么以前的版本不起作用。这是我的减速器功能：

//reducer.js

import 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