React类组件中personalInformation状态更新失败求助

问题描述 #

在React类组件中尝试更新state.personalInformation的属性时，输入框输入内容后状态未更新，输入框也无法同步内容。原代码中，最初的更新方法会直接覆盖整个personalInformation对象，修改后的方法虽能触发，但状态仍无变化。

错误原因分析 #

1. State更新路径错误：当前的updatePersonalInfoState方法错误地将personalInformation的属性展开到了state根节点，而非更新state.personalInformation对象本身，导致组件绑定的personalInformation属性完全没变化。
2. 输入框name与State属性不匹配：职位标题输入框的name设置为job-title，但state.personalInformation中对应的属性是title，导致无法正确映射更新。

修正方案 #

1. 修正State更新方法 #

正确的做法是嵌套展开personalInformation对象，保留原有属性的同时更新目标属性：

updatePersonalInfoState = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    this.setState({
        personalInformation: {
            ...this.state.personalInformation, // 保留原有所有属性
            [name]: value // 更新当前输入对应的属性
        }
    });
};

2. 修正输入框name属性 #

将职位标题输入框的name改为title，与state.personalInformation中的属性名一致：

<input 
    type='text' 
    name='title' 
    id='job-title' 
    value={personalInfo.title}
    onChange={this.updatePersonalInfoState}
/>

完整修正后的组件代码 #

class Main extends Component {
    constructor() {
        super();
        this.state = {
            personalInformation: {
                firstName: '',
                lastName: '',
                title: '',
                email: '',
                address: '',
                phone: ''
            },
            experience: [
                {
                    position: '',
                    company: '',
                    startDate: '',
                    endDate: '',
                    description: ''
                },
            ]
        };
    };

    updatePersonalInfoState = (e) => {
        const name = e.target.name;
        const value = e.target.value;
        this.setState({
            personalInformation: {
                ...this.state.personalInformation,
                [name]: value
            }
        });
    };

    render() {
        const personalInfo = this.state.personalInformation;
        return(
            <form>
                <input type='text' 
                    name='firstName' 
                    id='firstname' 
                    value={personalInfo.firstName}
                    onChange={this.updatePersonalInfoState}
                />
                <label htmlFor='lastname'> Last Name</label>
                <input type='text' 
                    name='lastName' 
                    id='lastname' 
                    value={personalInfo.lastName}
                    onChange={this.updatePersonalInfoState}
                />
                <label htmlFor='job-title'> Title</label>
                <input 
                    type='text' 
                    name='title' 
                    id='job-title' 
                    value={personalInfo.title}
                    onChange={this.updatePersonalInfoState}
                />
                <label htmlFor='email'> Email</label>
                <input 
                    type='email' 
                    name='email' 
                    id='email' 
                    value={personalInfo.email}
                    onChange={this.updatePersonalInfoState}
                />
                <label htmlFor='address'> Address</label>
                <input 
                    type='text' 
                    name='address' 
                    id='address' 
                    value={personalInfo.address}
                    onChange={this.updatePersonalInfoState}
                />
                <label htmlFor='phone'> Tel</label>
                <input 
                    type='tel' 
                    name='phone' 
                    id='phone'
                    value={personalInfo.phone}
                    onChange={this.updatePersonalInfoState}
                />
            </form>
        )
    }
}

export default Main;

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