ReactJS

Question

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

这个 post 在 ReactJS 前端。

我正在使用功能组件。有一个“BlogList”组件，其中将显示从 API 端点获取的所有博客。我创建了一个“BlogForm”组件，我必须在其中输入 2 个字段：“标题”和“内容”才能创建博客 post。我在“BlogList”组件中导入了“BlogForm”组件，以在同一页面上显示它。 Please see this image to get a good understanding

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

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

代码如下，供大家参考。

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 的回答后，我更新了代码，但在尝试添加新博客时出现错误 Post。它正在显示 undefined

Answer 1

BlogList 具有您要从子组件 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 (
        ...
    );
}

ReactJS - 如何在 POST 数据到数据库后 re-render 功能组件

ReactJS - How to re-render functional component after POST data to database

use-effect

react-functional-component

use-state