尽管状态已更新，但我在 React 中使用 axios 发布请求后 DOM 未更新

Question

我有一个非常简单的基本 React 应用程序正在运行。我可以通过 axios 发布和获取数据，并且可以在控制台中看到，当我发布数据时，我的状态已更新，但 DOM 没有反映这一点，我需要刷新才能看到更改。请检查我做错了什么：

这是我在 componentDidMount 中的 get 方法：

componentWillMount() {
    const { posts } = this.state;
    axios
        .get("dburl/posts.json")
        .then(response => {
        const data = Object.values(response.data);
        this.setState({ posts : data });
        });
}

这是我提交表单的 post 方法。我正在创建带有标题和内容的帖子并在屏幕上显示它们：

handleSubmit = event => {
    event.preventDefault();
    const {post} = this.state;
    const {posts} = this.state;
    axios
        .post("dburl/posts.json", post)
        .then(response => {
        console.log(response);
        const newPost = Object.values(response.data);
        this.setState({ post: newPost });
        const updatedPosts = posts.push({title:post.title,content:post.content});
        console.log(post);
        console.log(updatedPosts);
        console.log(this.state.posts);
        });
};

这是我显示数据的方式：

render() {
    let posts = <p>No posts yet</p>;
    if (this.state.posts !== null) {
        posts = this.state.posts.map(post => {
            return <Post key={post.id} {...post} />;
        });
    }

    return (
        <React.Fragment>
            {posts}
            <form className="new-post-form" onSubmit={this.handleSubmit}>
                <label>
                    Post title
                    <input
                        className="title-input"
                        type="text"
                        name="title"
                        onChange={this.handleChange}
                    />
                </label>
                <label>
                    Post content
                    <input
                        className="content-input"
                        type="text"
                        name="content"
                        onChange={this.handleChange}
                    />
                </label>
                <input className="submit-button" type="submit" value="submit" />
            </form>
        </React.Fragment>
    );
}

我不明白为什么它没有更新 DOM 并且新帖子没有立即显示。请检查。谢谢。

Answer 1

你错误地更新了你的状态， 你的代码：

console.log(response);
const newPost = Object.values(response.data);
this.setState({ post: newPost });//this will update the state with new values
const updatedPosts = posts.push({title:post.title,content:post.content});//here you are
pushing the new values to the existing posts
console.log(post);
console.log(updatedPosts);
console.log(this.state.posts);

所需代码：

console.log(response);
const newPost = Object.values(response.data);
this.setState({ posts:  [...this.state.posts, {title:post.title,content:post.content}]});
console.log(post);
console.log(this.state.posts);

这样它会在更新帖子数组后更新你的状态。