这是我的formSlice,我得到的是"expression expected"后面的builder和箭头函数.

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

export const getform = createAsyncThunk("form/getForm", async () => {
  try {
    const result = await axios.get("http://localhost:5000/autoroute/");
    return result.data;
  } catch (error) {}
});

export const addform = createAsyncThunk("form/add", async (form) => {
  try {
    const result = await axios.post("http://localhost:5000/autoroute/", form);
    return result.data;
  } catch (error) {}
});

export const deleteform = createAsyncThunk("form/deleteForm", async (id) => {
  try {
    const result = await axios.delete(`http://localhost:5000/autoroute/${id}`);
    return result.data;
  } catch (error) {}
});

export const updateform = createAsyncThunk(
  "form/deleteForm",
  async ({ id, form }) => {
    try {
      const result = await axios.put(
        `http://localhost:5000/autoroute/${id}`,
        form
      );
      return result.data;
    } catch (error) {}
  }
);

createReducer(initialState, builder = {
  form: [],
  status: null,
});

export const formSlice = createSlice({
  name: "form",
  initialState,
  reducers: {},
  extraReducers: builder =>{
    builder.getform(pending, (state) => {
      state.status = "pending";
    }),
    builder.getform(pending, (state) => {
      state.status = "success";
    }),
    builder.getform(pending, (state) => {
      state.status = "fail";
    }),
  },
});

// Action creators are generated for each case reducer function
// export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default formSlice.reducer;

它在extraReducers的右括号builder后面写着"expression expected".我正在使用一个旧版本的Redux—Toolkit,但错误告诉我,我需要将我的代码与新版本匹配.

推荐答案

在代码中有相当多的令人困惑的非valida JavaScript,以下是相关部分更正:

// I don't know what you wanted to do with createReducer here but it seems you wanted to declare an initial state?
const initialState = {
  form: [],
  status: null,
};

export const formSlice = createSlice({
  name: "form",
  initialState,
  reducers: {},
  extraReducers: builder => {
    // instead of builder.getform(pending 
    builder.addCase(getform.pending, (state) => {
      state.status = "pending";
    }); // you can either do a semicolon here, or nothing, but not a comma
    // this is not an object definition, but a function body.
  },
});

Reactjs相关问答推荐

实时收听react前端应用程序中的webhook响应

在Reaction中单击时,按钮未按预期工作

XChaCha20-Poly1305的解密函数

为多租户SSO登录配置Azure AD应用程序

如何使用Reaction Testing Library+Vitest正确更新单元测试中的输入?

有没有办法在 React Router v6 中的路由匹配上运行一些逻辑/功能?

将 useRef 与 useImperativeHandle 一起使用时,React 不会重新渲染

Chakra UI:如何在选中状态下设置复选框 colored颜色

无法设置 null 的属性(设置src)

在按钮单击中将动态参数传递给 React Query

如何到达类组件中的状态?

为什么刷新页面时我的localStorage PET值变成空字符串?

如何在 React Native 中更新跨屏幕呈现的上下文状态变量?

React Native map 中的初始zoom 级别

自动重新获取不起作用 - RTK 查询

setState 改变对象引用

React - useParams() 不会失败 null / undefined 判断

在状态中存储多个选定的选项

将 C# Razor 条件块转换为 React.js 代码

如何从另一个切片中的不同切片获取状态并对其进行处理?