React Typescript with Redux - 未处理的拒绝（TypeError）：无法在已撤销的代理上执行“设置”答案

【问题标题】：React Typescript with Redux - Unhandled Rejection (TypeError): Cannot perform 'set' on a proxy that has been revokedReact Typescript with Redux - 未处理的拒绝（TypeError）：无法在已撤销的代理上执行“设置”
【发布时间】：2021-10-25 18:09:05
【问题描述】：

我正在尝试创建 React 应用程序并与 Redux 连接，但是当我从服务 api 获取数据后尝试更新状态时出现错误。请帮忙。

错误描述：

我分享了 3 个我认为对于解决这个问题很重要的文件。

questionReducers.ts 文件

import {createAction, createReducer} from '@reduxjs/toolkit';
import {fetchInitData} from './questionAPI';
import {AnswerInterface} from "../types/AnswerInterface";
import {Questions} from "../types/Questions";
import {RootState} from "./store";

interface QuestionsState {
    data: Questions,
    status: 'loading' | 'loaded' | 'error'
}

const initialState = {
    data: {
        question: {
            text: '',
            imageURL: ''
        },
        answers: [],
    },
    status: 'loading',
} as QuestionsState

export const appState = (state: RootState) => state;
export const initData = createAction('app/init')
export const addAnswer = createAction<AnswerInterface>('question/addAnswer')


export const questionReducer = createReducer(initialState, (builder) => {
    builder
        .addCase(initData, (state) => {
            fetchInitData().then((res) => {
                state.data = res;
                state.status = 'error';
            }).catch(() => {
                state.status = 'error';
            });
        })
        .addCase(addAnswer, (state, action) => {
            state.data.answers.push(action.payload);
            localStorage.setItem('data', JSON.stringify(state.data));
        })
})

questionAPI.ts 文件

export function fetchInitData() {
    return fetch('https://example.com/data.json')
        .then(response => response.json())
        .then(response => {
            return response[0];
        })
}

App.tsx 文件

import React, {useEffect, useState} from 'react';
import styles from './App.module.css';
import { useAppSelector, useAppDispatch } from './app/hooks'
import {initData, appState} from "./app/questionRedeucer";

const App:React.FC<any> = () => {
    const state = useAppSelector(appState);
    const dispatch = useAppDispatch();

    useEffect(() => {
        dispatch(initData());
    });

    return (
        <div className={styles.App}>
            {state.status === 'loading' && <div>Loading...</div>}
            {state.status === 'loaded' && <div>Loaded...</div>}
        </div>
    );
}

export default App;

【问题讨论】：

标签： reactjs redux react-redux redux-thunk redux-toolkit

【解决方案1】：

您正在尝试在 reducer 中执行异步工作，这是错误的 - reducer 必须从不包含任何异步逻辑！

从技术上讲，localStorage.setItem() 也是一个副作用，不属于减速器，尽管实际上这没什么大不了的。

请将该异步逻辑移出到一个 thunk 中：

【讨论】：