我无法从创建异步Thunk函数中获取值



UpdateMemory.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; 

回忆切片.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


})

公理.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)运行良好。但是当我尝试从函数中获取第二个参数的值时updateMemoryconsole.log("content : ", content)显示content : {extra: undefined, requestId: "mtUwsnm7jiaTURnpKV3W_", signal: AbortSignal, dispatch: ƒ, getState: ƒ, …},因此它不会向我发送memoryData.为什么dispatch(updateMemory(id, memoryData))没有正确向我发送第二个参数?

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

最新更新