ReactJS - 如何在 POST 数据到数据库后重新渲染功能组件

Question

我正在构建一个博客应用程序。 此应用程序的前端使用 ReactJS 构建，后端使用 Python（Django 框架）构建。 前端和后端通过 Django REST API 框架连接。

这篇文章位于 ReactJS 前端。

我正在使用功能组件。 有一个“博客列表”组件，其中将显示从 API 端点获取的所有博客。 我创建了一个“BlogForm”组件，我必须在其中输入 2 个字段：“标题”和“内容”来创建博客文章。 我在“BlogList”组件中导入了“BlogForm”组件以在同一页面上显示它。 请看这张图片以获得一个很好的理解

当我在“BlogForm”组件中输入“标题”和“内容”并单击“提交”按钮时，使用 API 调用将数据保存在数据库中。 但当时添加的数据并未显示在“BlogList”组件中。 我必须刷新页面才能在博客列表中看到新的博客文章。

社区中的任何人都可以帮助我解决单击“提交”按钮时如何立即查看添加的博客文章的问题吗？

供您参考，代码如下。

博客列表.js

import BlogForm from './BlogForm'

const BlogList = (url) => {

    
    const [blogs, setBlogs] = useState([])

    useEffect(() => {
        
        async function fetchBlogData() {
            
            const url = requests.blogList

            const request = await axios.get(url)

            setBlogs(request.data)
            return request
        }
        fetchBlogData()
    }, [url])

    return (
        <Wrapper>
            <BlogWrapper className="blog">

                // Blog Form Component Added
                <BlogForm />

                <div className="blog__header">
                    <h1 className="blog__header--title">
                        Information
                    </h1>
                </div>
                <hr className="blog__divider"/>
                <div className="blog__list">
                    <ul>
                        <li className="blog__item">
                            { blogs.map( (blog) => (
                                <div className="blog__item--container" key={ blog.id }>
                                    <h1 className="blog__item--title">
                                        <a className="blog__item--title blog__item--title--link" href={`/blog/${ blog.id }`}>
                                            { blog.title }
                                        </a>
                                    </h1>
                                    <small className="blog__item--date">{ blog.date_published }</small>
                                    <p className="blog__item--content">{ blog.content }</p>
                                </div>
                            ) ) }
                        </li>
                    </ul>
                </div>
            </BlogWrapper>
        </Wrapper>
    )
}

export default BlogList

BlogForm.js

const BlogForm = () => {

    const [inputValues, setInputValues] = useState({
        title : '',
        content : ''
    })

    const handleSubmit = async (event) => {
        event.preventDefault()
        setInputValues({ ...inputValues })

        const { title, content } = inputValues
        const blogPost = { title, content }

        const url = requests.blogCreate
        const response = await axios.post(url, blogPost)
        return response
    }

    const handleChange = (name) => (event) => {
        setInputValues({ ...inputValues, [name] : event.target.value })
    }

    return (
        <div>
            <form onSubmit={ handleSubmit }>
                <input type="text" name="title" placeholder="Title" required value={ inputValues.title } onChange={ handleChange('title') }/>
                <input type="text" name="content" placeholder="Content" required value={ inputValues.content } onChange={ handleChange('content') }/>
                <button type="submit">Submit</button>
            </form>
        </div>
    )
}

export default BlogForm

更新

在 DrewReese 的回答之后，我更新了我的代码，当我尝试添加新的博客文章时出现错误。 它显示undefined

Answer 1

BlogList具有您希望从子组件 BlogForm 更新的BlogForm 。 您可以将回调从父级传递给子级，以便BlogForm调用更新的帖子。

博客列表

const BlogList = (props) => {
    const [blogs, setBlogs] = useState([]);

    useEffect(() => {
        async function fetchBlogData() {
            const url = requests.blogList;
            const request = await axios.get(url);
            setBlogs(request.data);
        }
        fetchBlogData();
    }, [props]);

    // (1) Define a callback to update state
    const addNewPost = post => setBlogs(posts => [...posts, post]);

    return (
        <Wrapper>
            <BlogWrapper className="blog">

                // Blog Form Component Added
                <BlogForm addNewPost={addNewPost} /> // <-- (2) pass callback

                ...
            </BlogWrapper>
        </Wrapper>
    );
}

博客表格

const BlogForm = ({ addNewPost }) => { // <-- (3) destructure callback

    const [inputValues, setInputValues] = useState({
        title : '',
        content : ''
    })

    const handleSubmit = async (event) => {
        event.preventDefault()
        setInputValues({ ...inputValues });

        const { title, content } = inputValues;
        const blogPost = { title, content };

        const url = requests.blogCreate;
        const response = await axios.post(url, blogPost);
        addNewPost(response.data); // <-- (4) call callback with new post data
    }

    ...

    return (
        ...
    );
}