React新手求助：Props变更时页面为何不重新渲染？

问题核心 #

你当前的BlogPostEdit组件中，useState(props.postToEdit)仅在组件首次渲染时初始化内部状态，后续父组件传递的postToEdit更新时，内部状态不会自动同步。直接绑定props.postToEdit到表单值会导致表单只读——因为props由父组件控制，每次渲染都会重置输入内容。若盲目用useEffect同步props，又会因对象引用变化触发无限渲染。

解决步骤 #

1. 添加useEffect监听props.postToEdit的变化，通过post_id判断是否需要更新内部状态，避免不必要的渲染。
2. 补全表单提交函数，实现向后端发送更新请求的逻辑。

修改后的BlogPostEdit组件代码 #

import React, { useState, useEffect } from 'react'

export default function BlogPostEdit(props) {
    const [blogValues, setBlogValues] = useState(props.postToEdit);
         
    // 监听选中文章变化，同步到表单状态
    useEffect(() => {
        // 仅当post_id改变时更新，避免对象引用变化触发无效更新
        if (props.postToEdit.post_id !== blogValues.post_id) {
            setBlogValues(props.postToEdit);
        }
    }, [props.postToEdit]);

    const changeHandler = e => {
        setBlogValues({...blogValues, [e.target.name]: e.target.value});
    }

    // 表单提交逻辑
    const onSubmitForm = async (e) => {
        e.preventDefault();
        try {
            await fetch(`http://localhost:5001/blog-edit/${blogValues.post_id}`, {
                method: "PUT",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(blogValues)
            });
            alert("文章更新成功");
            // 可选：通知父组件刷新文章列表
            // props.refreshPosts();
        } catch (error) {
            console.error(error.message);
            alert("更新失败，请重试");
        }
    }
        
    return (
      <div>
        <h1 className='text-center mt-5'>Edit Blog Post</h1>
        <form className="mt-5" onSubmit={onSubmitForm}>
   
          <label htmlFor="title">Blog Post Title</label>
          <input
            id="title"
            name="title"
            type="text" 
            className='form-control'
            value={blogValues.title} 
            onChange={changeHandler}
          />
          
          <label htmlFor="sub_title">Blog Post Sub-Title</label>
          <input
            id="sub_title"
            name="sub_title"
            type="text" 
            className='form-control'
            value={blogValues.sub_title}
            onChange={changeHandler}
          />
   
          <label htmlFor="main_content">Blog Post Content</label>
          <input
            id="main_content"
            name="main_content"
            type="text" 
            className='form-control'
            value={blogValues.main_content}
            onChange={changeHandler}
          />
   
          <label htmlFor="post_url">Blog Post URL</label>
          <input
            id="post_url"
            name="post_url"
            type="text" 
            className='form-control'
            value={blogValues.post_url}
            onChange={changeHandler}
          />
   
          <label htmlFor="page_title">Blog Post Page Title</label>
          <input
            id="page_title"
            name="page_title"
            type="text" 
            className='form-control'
            value={blogValues.page_title}
            onChange={changeHandler}
          />
          <label htmlFor="meta_description">Meta Description</label>
          <input
            id="meta_description"
            name="meta_description"
            type="text" 
            className='form-control'
            value={blogValues.meta_description}
            onChange={changeHandler}
          />
   
          <label htmlFor="meta_keywords">Meta Keywords</label>
          <input
            id="meta_keywords"
            name="meta_keywords"
            type="text" 
            className='form-control'
            value={blogValues.meta_keywords}
            onChange={changeHandler}
          />
          <button className='btn btn-success'>Submit Edits</button>
        </form>
      </div>
    )
}

关键说明 #

• useEffect中通过post_id判断更新，解决了之前“渲染次数过多”的问题——只有选中的文章真正变化时，才同步表单状态。
• 提交函数使用PUT请求发送更新数据，需确保后端接口支持该请求方法，并正确解析JSON格式的请求体。
• 若需要更新后自动刷新文章列表，可以在父组件定义refreshPosts函数，通过props传递给子组件，在提交成功后调用。

内容的提问来源于stack exchange，提问作者user3285962