React-Redux 更新表单（PUT 请求）问题

Question

我正在尝试更新表单，但某些内容无法正常工作。我点击更新后，控制台中记录了更新的信息，但是状态管理的redux端好像不行。我在控制台中没有收到任何错误，但我的操作 UPDATE_POST 在 Chrome 上的 Redux 开发工具中都不可见。

代码如下：

UpdateForm 组件：

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.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 = { title, body, author }
        dispatch(updatePost(post))
        console.log('post', post)//updated post is logged in console
        history.push('/')
    }

    console.log("title", title)

    return ( 
        <div className="create">
            <h2>Update Blog</h2>
            <form>
                <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 onClick={handleUpdate}>Update</button>
            </form>
        </div>
    );

}
 
export default UpdateForm;

动作：

export const updatePost = (post) => async dispatch => {
    const res = await jsonPlaceholder.put(`posts/update/${post._id}`);
    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.data
            }
        case DELETE_POST:
            return state.filter((post)=>post.id !== action.id);
        default:
            return state
    }
}

export default postReducer;

这里是请求的 node.js/express 服务器端：

router.put('/update/:id', async (req, res) => {
    try {
        let post = await Post.findOneAndUpdate(req.params.id, {
            title: req.body.title,
            body: req.body.body,
            author: req.author.body
        })
        console.log('server', post)
        return res.json(post)
    } catch (error) {
        console.error(error.message);
        res.status(500).send('Server Error')
    }
})

我现在收到服务器错误 (500)，如果我删除行 author: req.author.body，我不会收到错误。前面的代码还是不行。

Answer 1

您需要调度 updatePost 操作，而不是直接调用它。你错过了 useDispatch 调用。

这里是 React Redux 文档的链接：

https://react-redux.js.org/api/hooks#usedispatch

例子：

import React from 'react'
import { useDispatch } from 'react-redux'

export const CounterComponent = ({ value }) => {
  const dispatch = useDispatch()

  return (
    <div>
      <span>{value}</span>
      <button onClick={() => dispatch({ type: 'increment-counter' })}>
        Increment counter
      </button>
    </div>
  )
}

[更新]

刚刚注意到您的 updatePost 操作是一个高阶函数，因此一旦您添加对 useDispatch 的调用，您就需要更改对 updatePost 来自

updatePost(post)

到

updatePost(post)(dispatch)

老实说，我可能会选择 book action creator 并将 API 调用移至组件本身。如果您对异步操作感兴趣，我建议您研究一下 react-thunk，它很容易开始。

[更新 2]

快递代码好像有错别字。

req.author.body

应该是

req.body.author

[更新 3]

updatePost 中的 post 对象不包含 _id 字段（检查您的 handleUpdate 函数）因此您将获得 url：“posts/update/undefined”。

Answer 2

正如我所见，您是直接调用您的操作而不是调度它

导入 useDispatch 并像这样使用它

import { useDispatch } from "react-redux";

UpdateForm.js

const UpdateForm = () => {
    ....
    const dispatch = useDispatch();

    .....

    const handleUpdate = async (e) => {
        e.preventDefault();
        const post = { title, body, author }
        dispatch(updatePost(post))           // dispatch like this     
        console.log('post', post)//updated post is logged in console
        history.push('/')
    }

    console.log("title", title)

    return ( 
        <div className="create">
           .......
        </div>
    );

}
 
export default UpdateForm;

减速器

您访问的是action.data，而不是action.payload

case UPDATE_POST:
        return {
         ...state,
         post: action.payload     
       }