Der Redux-Status kann nicht korrekt auf Backend-Daten (MySQL) zugreifen

Question

Ich habe Probleme beim Rendern von Daten zwischen Backend (mySQL) und Frontend. Ich habe in den Redux-Devtools und Konsolenprotokollen Fehler behoben, kann aber die Ursache immer noch nicht finden. Die Daten werden korrekt im Konsolenprotokoll erfasst, aber wenn ich meinen Status protokolliere, ist er einfach leer. In Redux Devtools kann ich die Daten auf der Registerkarte „Aktionen“ sehen und die Statusänderungen von „Ausstehend“ zu „Abgeschlossen“ sehen. Nach Abschluss ist der Status jedoch leer.

Dies ist der Ausgangszustand meiner Slice-Komponente:

const initialState = {
  loading: false,
  error: "",
  supplierInfo: [
    {
      id: "",
      supplierName: "",
      supplierTin: "",
      supplierAddress: "",
      telNumber: "",
      celNumber: "",
      emailAddress: "",
    },
  ],
};

Das ist meine Get-Funktion (Daten werden korrekt protokolliert):

export const fetchSuppliers = createAsyncThunk(
  "/supplier/fetchSuppliers",
  async () => {
    try {
      const response = await axios.get("http://localhost:3000/api/get");

      return response.data;
    } catch (error) {
      throw error;
    }
  }
);

Das ist mein Slicing-Code:

export const SupplierSlice = createSlice({
  name: "supplier",
  initialState,
  reducers: {
    addSupplier: (state, action) => {
      state.supplierInfo.push(action.payload);
    },
    extraReducers: (builder) => {
      builder.addCase(fetchSuppliers.pending, (state) => {
        state.loading = true;
      });
      builder.addCase(fetchSuppliers.fulfilled, (state, action) => {
        state.loading = false;
        state.supplierInfo = action.payload;
        state.error = "";
      });
      builder.addCase(fetchSuppliers.rejected, (state, action) => {
        state.loading = false;
        state.supplierInfo = [];
        state.error = action.error.message;
      });
    },
  },
});
export default SupplierSlice.reducer;
export const { addSupplier } = SupplierSlice.actions;

Der Code, den ich zum Verteilen der Daten verwende:

export const SuppliersTable = () => {
  const suppliers = useSelector((state) => state.supplier.supplierInfo);
  console.log(suppliers);
  const data = suppliers;
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchSuppliers());
  }, [dispatch]);

Das obige console.log ist einfach leer. Ich weiß nicht, warum. Vielleicht liegt das Problem an den Reduzierstücken? Obwohl ich die Daten auf der Registerkarte „Aktion“ sehen kann, werden sie nicht im Status angezeigt.

Dies ist die Aktionsregisterkarte in Redux Devtools:

Geben Sie hier eine Bildbeschreibung ein

Das steht auf der Registerkarte „Status“:

Geben Sie hier eine Bildbeschreibung ein

Wie Sie sehen, wird im Status nichts angezeigt. Ich weiß nicht, warum. Kann jemand helfen? Danke!

Ich versuche seit ein paar Stunden, das Problem zu beheben. Verwenden Sie Protokollanweisungen und Redux-Devtools. Ich sehe die Daten vom Backend, aber sie sind nicht im Status.

Answer 1

Redux状态未接收到数据，因为您的代码语法有误。

请将我的示例代码与您的实际代码进行比较。

const supplierSlice = createSlice({
  name: "supplier",
  initialState: initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchSuppliers.pending, (state, action) => {
      console.log(action);
      state.loading = true;
    });
    builder.addCase(fetchSuppliers.fulfilled, (state, action) => {
      state.supplierInfo = action.payload;
      state.loading = false;
    });
    builder.addCase(fetchSuppliers.rejected, (state, action) => {
      state.loading = false;
    });
  }
});

这是示例示例