Reactjs 设置状态不会更改对象的状态

我试图使用set state设置一个对象，但是什么也没有发生

我将

blog

对象初始化为一个几乎为空的对象，然后通过

setBlog

将其设置为一个新对象

注意，当登录到控制台时，我可以看到

foundBlog

对象，因此问题不存在。问题是在

setBlog

之后记录

blog

对象时，我看到了初始对象，因此

setBlog

没有做任何事情

我的问题是：在这种情况下使用

setBlog

的正确方法是什么

import React, { useEffect, useState } from 'react';
import { RouteComponentProps, withRouter } from 'react-router';

import Blogs from '../../mock-data/draftBlogs.json';
import BlogCreation, { IBlogCreationProps } from './create-edit-blog/BlogCreation';

interface IBlogPageProps {

}

const blogArr = Blogs.blogs;

const BlogPage: React.FunctionComponent<IBlogPageProps & RouteComponentProps<any>> = (props) => {

  const [blog, setBlog] = useState<IBlogCreationProps>({
    id: 4,
    title: "",
    content: "",
    description: "",
    publisher: "",
    published: false
  });
  
  useEffect(() => {
    let number: number = props.match.params.number;
   
    const foundBlog = (blogArr.find(({id}) => id == number)) as IBlogCreationProps;
    console.log("foundBlog", foundBlog); // logs the expected result
    // code below is supposed to set the object to the new object, but it's not working
    setBlog({...blog,
      id: foundBlog.id,
      title: foundBlog.title,
      content: foundBlog.content,
      description: foundBlog.description,
      publisher: foundBlog.publisher,
      published: foundBlog.published}
      );
    console.log("blog", blog); // logs the initial object
  }, [props])
  return (
    <BlogCreation
      id={blog.id}
      title={blog.title}
      content={blog.content}
      description={blog.description}
      publisher={blog.publisher}
      published={blog.published}
    />
  );
};

export default withRouter(BlogPage);

import React，{useffect，useState}来自“React”；
从“react router”导入{RouteComponentProps，withRouter}；
从“../../mock data/draftBlogs.json”导入博客；
从“./create edit blog/BlogCreation”导入BlogCreation，{IBlogCreationProps}；
接口IBlogPageProps{
}
const blogArr=Blogs.Blogs；
const BlogPage:React.FunctionComponent=（props）=>{
const[blog，setBlog]=useState({
id:4，
标题：“，
内容：“，
说明：“，
出版者：“，
已出版：假
});
useffect（（）=>{
让number:number=props.match.params.number；
constfoundblog=（blogArr.find（{id}=>id==number））作为IBlogCreationProps；
console.log（“foundBlog”，foundBlog）；//记录预期结果
//下面的代码应该将对象设置为新对象，但它不起作用
setBlog（{…blog，
id:foundBlog.id，
标题：foundBlog.title，
内容：foundBlog.content，
description:foundBlog.description，
发布者：foundBlog.publisher，
已发布：foundBlog.published}
);
console.log（“blog”，blog）；//记录初始对象
}[道具]）
返回(
);
};
使用路由器导出默认值（BlogPage）；

编辑：

事实证明，这是一个与依赖项数组相关的问题，更改依赖项修复了初始日志记录问题（没有看到正确的对象），但它增加了其他问题，我可以看到两个日志，而不是一个。

---

无论如何，我的主要问题是使用正确的道具渲染组件，但这个问题没有得到解决。

您的代码似乎正常工作。在console.log中看不到更改的原因是

setState

是异步的。此函数不更新该值，它告诉React您要更新它，React将很快自行更新。结果是不会立即重新分配状态，并且代码会在更新状态之前记录状态

但是，您可以将回调作为第二个参数传递给

setState

，该参数将在更新完成后立即调用：

setState（newValue，callback）

您好，看看这个，在useffect（（）=>{setState（state=>{…state}}}，[]）中尝试这样设置state

setBlog({...blog,
      id: foundBlog.id,
      title: foundBlog.title,
      content: foundBlog.content,
      description: foundBlog.description,
      publisher: foundBlog.publisher,
      published: foundBlog.published
}, () => console.log("blog", blog)); // this is called after the state
                                     // is effectively updated