在 axios POST 请求后更新状态而不是页面刷新答案

【问题标题】：Update state after axios POST request instead of page refresh在 axios POST 请求后更新状态而不是页面刷新
【发布时间】：2021-04-09 05:09:24
【问题描述】：

我有一个带有输入字段“标题”和“正文”的表单，它们在提交表单后被添加到 MongoDB，但新的帖子项目只有在我刷新页面后才会显示（当然不是这样应该可以），但我想知道我做错了什么以及如何修复handleSumbit函数？

这是我的代码：

import { useState, useEffect } from "react";
import axios from "axios";
import "./App.css";

function App() {
    const [title, setTitle] = useState("");
    const [body, setBody] = useState("");
    const [posts, setPosts] = useState([]);

    const url = "http://localhost:8005/";

    useEffect(() => {
        const fetchPosts = async () => {
            const response = await axios(`${url}posts`);
            setPosts(response.data);
        };
        fetchPosts();
    }, []);

    const handleTitleChange = (event) => {
        setTitle(event.target.value);
    };

    const handleBodyChange = (event) => {
        setBody(event.target.value);
    };

    const handleSubmit = (event) => {
        event.preventDefault();

        axios.post(`${url}posts`, { title: title, body: body })
          .then((res) => {
             console.log(res.data);
        });

        alert("Post added!");

        setTitle("");
        setBody("");
    };

    console.log(posts);

    return (
        <div className="App">
            {posts.map((post) => (
                <div className="post" key={post.id}>
                    <h4>{post.title}</h4>
                    <p>{post.body}</p>
                </div>
            ))}
            <form onSubmit={handleSubmit}>
                <label>
                    Mew post:
                    <input
                        type="text"
                        name="title"
                        placeholder="Add title"
                        onChange={handleTitleChange}
                    />
                    <input
                        type="text"
                        name="body"
                        placeholder="Add body"
                        onChange={handleBodyChange}
                    />
                </label>
                <button type="submit">Add</button>
            </form>
        </div>
    );
}

export default App;

【问题讨论】：

标签： reactjs axios

【解决方案1】：

问题是您在发送 axios 发布请求后没有更新帖子状态。编辑以下代码块：

const handleSubmit = (event) => {
    event.preventDefault();

    axios.post(`${url}posts`, { title: title, body: body })
      .then((res) => {
         console.log(res.data);
         // save the new post to posts
         setPosts([...posts, res.data])
    });

    alert("Post added!");

    setTitle("");
    setBody("");
};

【讨论】：