沉浸式制作人 return 编辑了一个新值并修改了它的草稿。 return 一个新值或修改草稿

Question

我知道之前有人问过这个问题，但到目前为止除了有人犯了语法错误外没有答案。我已经根据我在网上看到的每个教程验证了这一点，但我找不到问题所在。它似乎来自 fullfilled extraReducer

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

const KEY = process.env.REACT_APP_API_KEY
const BASE_URL = process.env.REACT_APP_BASE_URL
const GLOBALVIEWS_API = `${BASE_URL}/countrymap`

const initialState = {
  mapdata:{},
  status: 'idle',  //'idle', 'loading', 'succeeded', 'failed'  
  error:null
}

export const fetchMapData = createAsyncThunk(
  'mapdata/fetchMapData', 
  async (id) => { 
    const response = await axios.get(
      GLOBALVIEWS_API,
      {
        headers: {
          'Content-Type': 'application/json',
          'X-API-KEY': KEY,
        },
        params: {
          titleId: id,
        }
      }
    )

    return response.data.Item;
  }
)

const mapSlice = createSlice({
  name: 'mapdata',
  initialState,
  reducers:{
    addMapData: (state, { payload }) => {
      state.mapdata = payload
    }
  },
  extraReducers: {
    [fetchMapData.pending]: () => {
      console.log("Pending");
    },
    [fetchMapData.fulfilled]: (state, { payload }) => {
      state.status = 'succeeded'
      console.log("Succeeded", payload);
      return {...state, mapdata: payload}
    },
    [fetchMapData.rejected]: () => {
      console.log("Rejected");
    },
  }
})

// SELECTORS
export const getMapStatus = (state) => state.mapdata.status;

export const allMapData = (state) => state.mapdata.mapdata;
export const { addMapData } = mapSlice.actions;


export default mapSlice.reducer

在组件中，没有什么奇怪的，是的，一切都是导入的

const {id} = useParams();
const dispatch = useDispatch();

const allmapdata = useSelector(allMapData)
const addmapdata = useSelector(addMapData) 
const mapStatus = useSelector(getMapStatus)

useEffect(() => { 
  dispatch(fetchMapData(id))
  
  lazy(setMap(allmapdata)) 
  console.clear()
  console.log("mapdata: ", allmapdata);    
      
}, [id, allmapdata, dispatch])

您可以在我的下图中看到我的提取成功并且正在获取数据。那么我该如何摆脱这个错误呢？提前致谢。

Answer 1

问题所在：

 state.status = 'succeeded'
 console.log("Succeeded", payload);
 return {...state, mapdata: payload}

这确实是“现有 state 的突变” 和一个“return 的新值”，而这正是错误警告您。

您可以将其更改为：

state.status = 'succeeded'
state.mapdata = action.payload

沉浸式制作人 return 编辑了一个新值并修改了它的草稿。 return 一个新值或修改草稿

An immer producer returned a new value and modified its draft. Either return a new value or modify the draft

javascript

redux

react-redux

redux-toolkit

沉浸式制作人 return 编辑了一个新值*并*修改了它的草稿。 return 一个新值*或*修改草稿

An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft

javascript

redux

react-redux

redux-toolkit

沉浸式制作人 return 编辑了一个新值并修改了它的草稿。 return 一个新值或修改草稿

An immer producer returned a new value and modified its draft. Either return a new value or modify the draft