React中多状态项的设置是否有更优实现方式？

当然有办法不用逐个手写这些状态项，给你几个实用的优化方案：

1. 批量生成表单状态字段 #

把所有表单字段名存到一个数组里，用reduce批量生成初始状态对象，后续加字段只需要在数组里新增即可：

constructor(props) {
    super(props);
    const formFields = ['name', 'phone', 'mail', 'title', 'city', 'description', 'linkedin', 'github'];
    this.state = {
        displayInfo: 0,
        ...formFields.reduce((stateObj, field) => {
            stateObj[field] = '';
            return stateObj;
        }, {})
    };
}

2. 省略constructor，用类字段语法 #

如果项目支持ES6+类字段特性，直接在类里声明状态，省去constructor和super的冗余代码：

class YourComponent extends React.Component {
    state = {
        displayInfo: 0,
        name: '',
        phone: '',
        mail: '',
        title: '',
        city: '',
        description: '',
        linkedin: '',
        github: '',
    };

    handleChange = (e) => {
        this.setState({ [e.target.name]: e.target.value });
    };
}

这种写法虽然还是要列出字段，但整体代码更清爽，减少了嵌套层级。

3. 嵌套表单状态对象 #

把所有表单相关字段放到一个嵌套对象里，让状态结构更清晰，和业务状态（比如displayInfo）做区分：

constructor(props) {
    super(props);
    this.state = {
        displayInfo: 0,
        formData: {
            name: '',
            phone: '',
            mail: '',
            title: '',
            city: '',
            description: '',
            linkedin: '',
            github: '',
        }
    };
}

对应的handleChange要调整为更新嵌套对象的写法：

handleChange = (e) => {
    const { name, value } = e.target;
    this.setState(prevState => ({
        formData: {
            ...prevState.formData,
            [name]: value
        }
    }));
}

这种方式后续维护表单字段时更直观，也方便统一处理表单的重置、提交等操作。

你当前使用的handleChange写法已经很高效，配合上面的方案能进一步提升代码的可维护性。

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