Reactjs 状态未得到更新

当我修改我的帖子并点击编辑帖子按钮时，我会被带到显示帖子的页面。但我对这篇文章所做的改动并不明显。我做错了什么

我正在使用上下文API进行状态管理。用于编辑帖子的状态更改逻辑位于reducer函数内，操作类型为“postdedited”

import React，{useState，useContext}来自“React”；
从“react router dom”导入{useHistory，useParams}；
从“./../Context”导入{postsContext}”；
const EditPost=（）=>{
const{id}=useParams（）；
const postinnum=parseInt（id）；
const history=useHistory（）；
const data=useContext（postsContext）；
const postClicked=data.posts.find（（post）=>post.id==postdnum）；
让我们点击它；
让后舔体；
如果（后单击）{
postClickedTitle=postClicked.title；
postClickedBody=postClicked.body；
}
const[title，setTitle]=使用状态（postclickedtille）；
const[body，setBody]=useState（点击后的body）；
const onTitleChanged=（e）=>setTitle（e.target.value）；
const onContentChanged=（e）=>setBody（e.target.value）；
const onEditPostClicked=（e）=>{
e、 预防默认值（）；
const editedPost={
身份证件
标题
身体，
};
if（标题和正文）{
数据发送({
键入：“editedPost”，
有效载荷：editedPost，
});
history.push（`/posts/${postdnum}`）；
}
};
返回(
标题：
正文：
编辑文章
);
};
导出默认编辑帖子；

import React，{Component}来自“React”；
从“axios”导入axios；
export const postsContext=React.createContext（）；
const reducer=（状态、操作）=>{
开关（动作类型）{
“邮资”一案：
返回{
……国家，
posts:[action.payload，…state.posts]，
};
案例“后期编辑”：
返回{
……国家，
posts:state.posts.map（（post）=>
post.id==action.payload.id？（post=action.payload）：post
),
};
违约：
返回状态；
}
};
导出类提供程序扩展组件{
状态={
员额：[]，
dispatch：（action）=>this.setState（（state）=>reducer（state，action）），
};
异步组件didmount（）{
const response=等待axios.get(
"https://jsonplaceholder.typicode.com/posts"
);
const posts=response.data.slice（0,50）；
this.setState（{posts}）；
}
render（）{
返回(
{this.props.children}
);
}
}
export const Consumer=postsContext.Consumer；

import React, { useState, useContext } from "react";
import { useHistory, useParams } from "react-router-dom";
import { postsContext } from "../../Context";

const EditPost = () => {
  const { id } = useParams();
  const postIdNum = parseInt(id);

  const history = useHistory();

  const data = useContext(postsContext);

  const postClicked = data.posts.find((post) => post.id === postIdNum);
  let postClickedTitle;
  let postClickedBody;
  if (postClicked) {
    postClickedTitle = postClicked.title;
    postClickedBody = postClicked.body;
  }

  const [title, setTitle] = useState(postClickedTitle);
  const [body, setBody] = useState(postClickedBody);

  const onTitleChanged = (e) => setTitle(e.target.value);
  const onContentChanged = (e) => setBody(e.target.value);

  const onEditPostClicked = (e) => {
    e.preventDefault();

    const editedPost = {
      id,
      title,
      body,
    };

    if (title && body) {
      data.dispatch({
        type: "editedPost",
        payload: editedPost,
      });
      history.push(`/posts/${postIdNum}`);
    }
  };

  return (
    <section>
      <form onSubmit={onEditPostClicked}>
        <div className="form-group">
          <label htmlFor="postTitle">Title:</label>
          <input
            type="text"
            id="postTitle"
            name="postTitle"
            value={title}
            onChange={onTitleChanged}
          />
        </div>
        <div className="form-group">
          <label htmlFor="postContent">Body:</label>
          <input
            type="text"
            id="postContent"
            name="postContent"
            value={body}
            onChange={onContentChanged}
          />
        </div>
        <button className="btn btn-primary">Edit Post</button>
      </form>
    </section>
  );
};

export default EditPost;

import React, { Component } from "react";
import axios from "axios";

export const postsContext = React.createContext();

const reducer = (state, action) => {
  switch (action.type) {
    case "postAdded":
      return {
        ...state,
        posts: [action.payload, ...state.posts],
      };
    case "postEdited":
      return {
        ...state,
        posts: state.posts.map((post) =>
          post.id === action.payload.id ? (post = action.payload) : post
        ),
      };
    default:
      return state;
  }
};

export class Provider extends Component {
  state = {
    posts: [],
    dispatch: (action) => this.setState((state) => reducer(state, action)),
  };

  async componentDidMount() {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/posts"
    );
    const posts = response.data.slice(0, 50);
    this.setState({ posts });
  }

  render() {
    return (
      <postsContext.Provider value={this.state}>
        {this.props.children}
      </postsContext.Provider>
    );
  }
}

export const Consumer = postsContext.Consumer;