NextJS props传值至编辑组件的异常与实现方案咨询

两个异常来自同一个实现问题：

• 你用display: none控制弹窗显隐，EditPopup组件始终处于挂载状态，从未被卸载重建
• 你使用defaultValue绑定表单项属于非受控组件用法，defaultValue仅在组件首次挂载时生效，后续传入的item_data props变化不会同步更新输入框值
• 组件首次挂载时，父组件传入的selected_book是初始空值{ id: '', title: '', author: '', desc: '' }，因此所有输入框初始值为空。后续点击EDIT按钮更新selected_book时，非受控表单项不会响应props更新：描述字段textarea因为从未被手动输入过内容，所以始终保持初始空值；输入过内容的title/author字段会保留上次输入的残留值，不会切换为新选中书籍的数据。

直接选useState配合onChange的受控组件方案，不要用useRef：

• 受控组件的表单值和React状态实时绑定，方便做输入校验、实时格式化、联动逻辑，适配绝大多数表单场景
• useRef获取非受控值的方案仅适合完全不需要干预输入过程、仅在提交时一次性取值的极简单场景，你这个场景需要每次打开弹窗同步对应书籍的数据，受控组件的逻辑更直观，不会踩非受控组件defaultValue不同步的坑。

修改后的EditPopup组件 #

组件内部维护表单状态，监听弹窗显示状态和选中书籍数据，每次打开弹窗时重置表单为当前选中书籍的原始数据：

import { useEffect, useState } from 'react'
import styles from '../../styles/EditPopup.module.css'

export default function EditPopup({ show, setPopupVisibility, item_data, onSave }){  
    const [formData, setFormData] = useState({
        title: '',
        author: '',
        desc: ''
    })

    // 弹窗打开/选中书籍变化时，同步最新数据到表单
    useEffect(() => {
        if (show) {
            setFormData({
                title: item_data.title ?? '',
                author: item_data.author ?? '',
                desc: item_data.desc ?? ''
            })
        }
    }, [show, item_data])

    const handleSave = () => {
        onSave({
            id: item_data.id,
            ...formData
        })
        setPopupVisibility(false)
    }

    // 统一处理表单项输入
    const handleInputChange = (e) => {
        const { name, value } = e.target
        setFormData(prev => ({
            ...prev,
            [name]: value
        }))
    }

    return (
        <div className={styles.popup} style={show ? {} : { display: 'none' }}>
            <input 
                type="text" 
                name="title"
                value={formData.title} 
                onChange={handleInputChange}
            />
            <input 
                type="text" 
                name="author"
                value={formData.author} 
                onChange={handleInputChange}
            />
            <textarea 
                name="desc"
                value={formData.desc}
                onChange={handleInputChange}
            />

            <button onClick={handleSave}>SAVE</button>
            <button onClick={() => setPopupVisibility(false)}>CANCEL</button>
        </div>
    )
}

修改后的父组件 #

新增保存编辑的回调函数，传递给弹窗组件，优化选中书籍的赋值逻辑：

import { useState } from 'react'
import EditPopup from './EditPopup' // 替换为你的组件实际路径

export default function BookListPage() {
    const [all_books, setAllBooks] = useState([]) // 替换为你实际的书籍列表state
    const [selected_book, setSelectedBook] = useState({ id: '', title: '', author: '', desc: '' })
    const [show_edit_popup, setShowEditPopup] = useState(false)

    // 处理编辑保存逻辑
    const handleBookEditSave = (updatedBook) => {
        setAllBooks(prev => prev.map(book => 
            book.id === updatedBook.id ? updatedBook : book
        ))
        // 此处可新增调用后端接口持久化数据的逻辑
    }

    return (
        <>
            <EditPopup 
                show={show_edit_popup}
                setPopupVisibility={setShowEditPopup}
                item_data={selected_book} 
                onSave={handleBookEditSave}
            />

            <div>
                {all_books.map((item) => (      
                    <div key={item.id}>
                        <p>Title: {item.title}</p>
                        <p>Author: {item.author}</p>
                        <p>Desc: {item.desc}</p>

                        <a href="#"
                            onClick={(e) => {
                                e.preventDefault()
                                setSelectedBook(item)
                                setShowEditPopup(true)
                            }} 
                        >EDIT</a>
                    </div>
                ))}
            </div>
        </>
    )
}

• 修复后不管你用display: none隐藏弹窗，还是改成条件渲染（show && <EditPopup />），都能保证每次打开弹窗时表单项填充的是当前选中书籍的正确数据，不会出现残留值
• 原代码中setSelectedBook展开prev的写法没有必要，每次点击EDIT都是切换到全新的书籍数据，直接赋值当前item即可
• 统一的handleInputChange通过name属性匹配对应字段，不用为每个表单项单独写监听函数，减少冗余代码

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