React中如何为对象内部赋值？附报错代码示例

嘿，这个问题我之前也踩过坑！先给你说清楚为什么你的代码会报错，再给你几种正确的做法：

为什么会报错？ #

你代码里的initialState = { ...state }之所以报错，核心原因是：通过import导入的模块变量是JavaScript模块规范定义的只读变量，你不能直接给它重新赋值。而且就算能改，直接修改全局导入的初始状态也是非常糟糕的实践——会污染整个应用的初始状态，导致其他依赖它的组件或逻辑出问题。

正确的处理方式 #

根据你的使用场景，分两种情况来解决：

场景1：在Redux/Reducer中生成新状态 #

如果这是Redux的reducer函数，你根本不需要修改initialState，直接返回一个合并后的新状态对象就行：

import { initialState } from '../store/initialState';

// 示例Reducer函数
const appReducer = (state = initialState, action) => {
  // 永远不要修改原initialState，直接返回新对象
  switch(action.type) {
    case 'UPDATE_USER':
      return { 
        ...state, 
        user: { ...state.user, name: action.payload } 
      };
    default:
      return state;
  }
};

场景2：需要基于初始状态创建可修改的副本 #

如果是要在其他逻辑里基于initialState调整属性，先创建一个副本再修改，绝对不要碰原导入的对象：

import { initialState } from '../store/initialState';

const adjustInitialState = () => {
  // 方式1：浅拷贝创建副本
  const newState = { ...initialState };
  // 修改副本的属性（如果是嵌套对象，要深拷贝哦）
  newState.settings.theme = 'dark';

  // 方式2：拷贝时直接修改属性，更简洁
  const anotherState = {
    ...initialState,
    settings: { ...initialState.settings, theme: 'dark' }
  };

  // 之后用newState/anotherState就行，原initialState完全不受影响
  return anotherState;
};

额外提醒（React组件内的状态管理） #

如果是在React组件里要用到这个状态，别直接操作initialState，用React的useState钩子来管理：

import { initialState } from '../store/initialState';
import { useState } from 'react';

const MyComponent = () => {
  // 用initialState初始化组件状态
  const [state, setState] = useState(initialState);

  // 更新状态时，通过setState传入新对象
  const updateTheme = () => {
    setState(prevState => ({
      ...prevState,
      settings: { ...prevState.settings, theme: 'dark' }
    }));
  };

  return <button onClick={updateTheme}>切换深色模式</button>;
};

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