React-Redux：在表单中重新填充数据的问题 - 在操作中的 res.data 中获取空值而不是更新的数据

问题描述

所以我有这个用于更新数据的表单，但是在使用新的更新输入重新填充数据对象时遇到了问题。我发出一个 GET 请求来获取帖子，这样我就可以在用户打开表单时立即用当前值填充更新表单的字段（我使用 useEffect 钩子来这样做）。 - 这很好用，因为表单被填充

问题在于保存重新填充的值。我将帖子设置为 setPost(response.data) ，将其设置为当前值，但我没有将其重置为新的更新值。我需要将带有重新填充值的 post 对象发送到调度函数。我需要这方面的帮助。

我认为我需要确保：

从数据库填充表单数据
onChange 设置要更新到 db 的新数据
从数据库中获取更新的数据并重新填充（更新）表单字段

表格如下：

import { useState,useEffect} from "react";
import { useHistory,useParams } from 'react-router-dom';
import jsonPlaceholder from "../apis/jsonPlaceholder";
import {updatePost} from '../actions'
import { usedispatch } from 'react-redux';


const UpdateForm = () => {
    const dispatch = usedispatch()
    const history = useHistory();
    const { id } = useParams();
    const [post,setPost] = useState({});
    const [title,setTitle] = useState(post.title);
    const [body,setBody] = useState(post.body);
    const [author,setAuthor] = useState(post.author);

    const fetchPost = async () => {
        const response = await jsonPlaceholder.get(`/posts/${id}`)
        console.log("response",response.data) 
        setPost(response.data)
        setTitle(response.data.title)
        setBody(response.data.body)
        setAuthor(response.data.author)
        return response.data
    }

    useEffect(() => {
        fetchPost();
    },[])
    

    const handleUpdate = async (e) => {
        e.preventDefault();
const post = {id,title,body,author}
        console.log('post ready to update',post)//here I get the post object with the updated values 
        dispatch(updatePost(post))
        history.push('/')
    }

    console.log("title",title)

    return ( 
        <div className="create">
            <h2>Update Blog</h2>
            <form onSubmit={handleUpdate}>
                <label>Blog title:</label>
                <input
                    type="text"
                    required 
                    defaultValue={title}
                    onChange={(e) => setTitle(e.target.value)}
                    />
                <label>Blog body:</label>
                <textarea
                    required
                    defaultValue={body}
                    onChange={(e) => setBody(e.target.value)}
                ></textarea>
                <label>Author:</label>
                <input
                    type="text"
                    required
                    defaultValue={author}
                    onChange={(e) => setAuthor(e.target.value)}
                    />
                <button>Update</button>
            </form>
        </div>
    );

}
 
export default UpdateForm;

这是操作：

export const updatePost = (post) => async dispatch => {
    console.log('updatePost action',post)
    const res = await jsonPlaceholder.put(`posts/update/${post.id}`);
    console.log('response action',res.data) //here I get back {_id: "605786874e65c82f549a43f5",title: null,body: null,author: null,__v: 0}
    dispatch({
        type: UPDATE_POST,payload: res.data
    })  
}

减速器：

import { ADD_POST,DELETE_POST,UPDATE_POST } from '../actions/types';

const postReducer = (state = [],action) => {
    switch (action.type) {
        case ADD_POST:
            return state.concat([action.data]);
        case UPDATE_POST:
            return {
                ...state,post: action.payload
            }
        case DELETE_POST:
            return state.filter((post) => post.id !== action.id);
        default:
            return state
    }
}

export default postReducer;

由于更新后的帖子进入 dispatch action 函数，我认为问题可能出在 action 本身或 reducer

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

forms react-redux reactjs reactjs use-state