React受控组件条件渲染空白页问题求助（仅用useState解决）

问题根源 #

你遇到的三个问题都和状态更新时未保留原有数据以及input缺少name属性直接相关：

• 输入框未提交就消失：changeHandler更新状态时直接替换了整个person对象，导致edit_mode被覆盖为undefined，触发了submittedContent的渲染
• 提交后状态清空：submitHandler只设置了edit_mode: false，丢弃了之前输入的所有字段值
• 提交无内容显示：input没有name属性，changeHandler无法正确映射到state的对应字段，导致输入内容根本没存入state

修复方案 #

1. 给每个input添加name属性，和state里的字段名一一对应
2. 所有状态更新操作都使用**展开运算符...**保留原有state数据，只修改需要更新的字段
3. 处理full_name.toUpperCase()可能的空值报错问题

修复后的完整代码 #

import React, { useState } from 'react';

export default function Info(){
    const [person, setPerson] = useState({
        full_name: "",
        email_ID: "",
        phone_number: "",
        edit_mode: true
    });
    
    const changeHandler = (e) => {
        // 展开原有状态，仅修改当前输入的字段
        setPerson({ ...person, [e.target.name]: e.target.value });
    }

    const submitHandler = (e) => {
        e.preventDefault();
        // 保留已输入数据，仅切换编辑状态
        setPerson({ ...person, edit_mode: false });
    }

    const editHandler = () => {
        // 保留现有数据，切换回编辑状态
        setPerson({ ...person, edit_mode: true });
    }

    const editContent = (
        <div>
            <form onSubmit={submitHandler}>
                <input 
                    type="text"
                    name="full_name"
                    value={person.full_name}
                    placeholder='Enter Your Full Name'
                    onChange={changeHandler}
                />
                <br/>
                <input 
                    type="email"
                    name="email_ID"
                    value={person.email_ID}
                    placeholder='Enter Your Email ID'
                    onChange={changeHandler}
                />
                <br/>
                <input 
                    type="tel"
                    name="phone_number"
                    value={person.phone_number}
                    placeholder='Enter Your Phone Number'
                    onChange={changeHandler}
                />
                <br/><br/>
                <button type="submit" className="submit-button">SUBMIT</button>
            </form>
        </div>
    )

    const submittedContent = (
        <div>
            <button onClick={editHandler} className="edit-button">EDIT</button>
            {/* 处理空值，避免toUpperCase报错 */}
            <h2>{person.full_name ? person.full_name.toUpperCase() : ''}</h2>
            <br/>
            <p>{person.email_ID}</p>
            <p>|</p>
            <p>{person.phone_number}</p>
        </div>
    )

    return(
        <>
            {person.edit_mode ? editContent : submittedContent}
        </>
    )
}

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