React组件修改this.state嵌套属性出现语法错误如何解决

错误原因 #

你遇到的语法报错是因为JavaScript 对象字面量不支持直接将嵌套属性路径（如themeData.theme）作为键名使用，这个写法不符合JS语法规范。
另外即使你用引号把themeData.theme包裹成字符串作为键，也无法实现嵌套属性更新，只会在state下新增一个名为themeData.theme的顶级属性，无法修改themeData对象内部的theme字段。
同时React的setState默认只会合并state的第一层属性，不会自动合并深层嵌套对象的属性，你需要手动保留themeData下不需要修改的toggler字段。

修正方案 #

更新嵌套属性时，先复制原有themeData的全部内容，再覆盖需要修改的theme字段即可，正确代码如下：

constructor() {
    super();
    this.handleThemeToggle = this.handleThemeToggle.bind(this);
    this.state = {
        themeData: {
            theme: ConsumerTestThemes.dark,
            toggler: this.handleThemeToggle
        }
    };
}
handleThemeToggle() {
    this.setState(state => ({
        themeData: {
            // 保留原有themeData的所有属性（这里主要是保留不变的toggler方法）
            ...state.themeData,
            // 覆盖更新theme字段
            theme: state.themeData.theme === ConsumerTestThemes.dark ? ConsumerTestThemes.light : ConsumerTestThemes.dark
        }
    }));
}

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