DOM не обновляется после моего почтового запроса с axios в React, хотя состояние обновляется

Question

У меня очень простое базовое приложение React.Я могу публиковать и получать данные через axios и видеть в консоли, что когда я публикую данные, мое состояние обновляется, но DOM не отражает это, и мне нужно обновить, чтобы увидеть изменения.Пожалуйста, проверьте, что я делаю неправильно:

Вот мой метод get в componentDidMount:

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);

Таким образом, оно обновит ваше состояние после обновления массива сообщений.