Question

更新的Memory.jsx

    import React, { useState, useEffect } from "react";
    import { Form, Button } from "react-bootstrap";
    import ReactFileBas64 from "react-file-base64";
    import { useHistory } from "react-router-dom";
    import { fetchSingleMemory } from "../axios";
    import { useDispatch } from "react-redux";
    import { updateMemory } from "../features/memoriesSlice";
    
    const UpdateMemory = ({ id }) => {
      const history = useHistory();
      const dispatch = useDispatch();
    
      const [memoryData, SetMemoryData] = useState({
        title: "",
        content: "",
        creator: "",
        image: "",
      });
    
      console.log(memoryData);
      useEffect(() => {
        const getMemory = async (id) => {
          const res = await fetchSingleMemory(id);
          const { title, content, creator, image } = res.data;
          SetMemoryData({
            title,
            content,
            creator,
            image,
          });
        };
        getMemory(id);
      }, [id]);
    
    return(
 <Form
        onSubmit={(e) => {
          e.preventDefault();
          dispatch(updateMemory(id, memoryData));
          history.push("/");
        }}
      >
        <Form.Group>
          <h1>Create a memory</h1>
        </Form.Group>
...
)
export default UpdateMemory;

memoriesSlice.js

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

export const getMemories = createAsyncThunk("memories/get", async () => {
  const { data } = await fetchMemories();
  return data;
});

export const addMemory = createAsyncThunk(
  "memories/post",
  async (newMemory) => {
    const { data } = await API.post("/memories", newMemory);
    return data;
  }
);

export const deleteMemory = createAsyncThunk("memories/delete", async (id) => {
  const { data } = await API.delete(`/memories/${id}`);
  return data;
});

export const updateMemory = createAsyncThunk("memories/update", async (id, content) => {
        console.log("id : ", id)
        console.log("content : ", content)
        const { data } = await API.put(`/memories/${id}`, content)
        return data

    
    
})

axios.js

import axios from "axios";

export const API = axios.create({
  baseURL: "http://localhost:5000",
});

// Create a memory
export const createMemory = async (newMemory) => {
  await API.post("/memories", newMemory);
};

// Get all memories
export const fetchMemories = () => API.get("/memories");

// Get selected memory
export const fetchSingleMemory = async (id) => await API.get(`/memories/${id}`)


// Delete selected memory
export const deleteMemory =  (id) =>  API.delete(`/memories/${id}`);


// Update selected memory
export const updateMemory = (id, content) => API.put(`/memories/${id}`, content)

大家好。首先，我其余的 createAsyncThunk 函数((getMemories, addMemory, deleteMemory) 运行良好。但是当我尝试从 updateMemory 函数 console.log("content : ", content) 获取第二个参数的值时，显示 content : {extra: undefined, requestId: "mtUwsnm7jiaTURnpKV3W_", signal: AbortSignal, dispatch: ƒ, getState: ƒ, …} 所以它没有向我发送 memoryData。为什么 dispatch(updateMemory(id, memoryData)) 没有正确地向我发送第二个参数？

Answer 1

我解决了伙计们。当我使用 dispatch(updateMemory({id, memoryData})) 而不是 dispatch(updateMemory(id, memoryData)) 时，它可以正常工作。

我无法从 createAsyncThunk 函数中获取值

1 个答案: