Next.js 如何仅触发被点击字段的内联编辑，避免所有输入框同时渲染

你当前实现使用单一的布尔值edit作为全局编辑状态，所有<p>标签块都引用同一个isEdit值做条件渲染判断，只要这个布尔值被设为true，所有绑定了该判断逻辑的块都会同步进入编辑态，因此会出现点击单个编辑按钮、所有输入框同时弹出的问题。

不要用布尔值记录全局编辑状态，转而记录当前处于编辑态的目标字段标识，把每个编辑块的状态判断从“全局是否在编辑”改成“当前块是不是被选中的编辑目标”，具体调整方式如下：

• 重构状态定义：把原来的布尔状态替换为存储字段名的状态，初始值设为null，代表没有任何块处于编辑态
• 调整条件判断逻辑：每个<p>块单独判断自身对应的字段名是否等于当前激活编辑的字段名，匹配成功才渲染输入框
• 调整按钮交互逻辑：点击对应位置的「编辑」按钮时，把当前块的专属字段名设为激活值；点击「保存」完成业务逻辑后，把激活值重置为null退出编辑

改造后的完整代码如下：

// 替换原来的布尔编辑状态
const [activeEditField, setActiveEditField] = useState(null);

// 原有setEmail、setAbout、addUserEmail、addUserAbout等业务逻辑保持不变
<div>
    {/* 邮箱字段块 */}
    <p>
        {activeEditField !== 'email' ? (
            <span>
                Email: {userProfile.email} 
                <button onClick={() => setActiveEditField('email')}>Edit</button>
            </span>
        ) : (
            <span>
                Email: 
                <input 
                    type="text" 
                    placeholder="email"
                    name="email"  
                    onChange={e => setEmail(e.target.value)}
                />
                <button 
                    type="submit" 
                    onClick={() => {
                        addUserEmail();
                        setActiveEditField(null); // 保存完成后退出编辑态
                    }}
                >
                    Save
                </button>
            </span>
        )}
    </p>

    {/* 关于信息字段块 */}
    <p>
        {activeEditField !== 'about' ? (
            <span>
                About: {userProfile.about} 
                <button onClick={() => setActiveEditField('about')}>Edit</button>        
            </span>
        ) : (
            <span>
                <input 
                    type="text" 
                    placeholder="about"
                    name="about"  
                    onChange={e => setAbout(e.target.value)}
                />
                <button 
                    type="submit" 
                    onClick={() => {
                        addUserAbout();
                        setActiveEditField(null); // 保存完成后退出编辑态
                    }}
                >
                    Save
                </button>
            </span>
        )}
    </p>
</div>

扩展提示：如果后续需要支持多个字段同时进入编辑态，只要把activeEditField从单个字符串调整为字符串数组即可，判断逻辑替换为activeEditField.includes('对应字段名')，点击编辑时把字段名追加进数组，保存时从数组中移除对应字段名。

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