React：如何基于event.target.name实现非突变嵌套受控状态通用更新

Hey there! Let's break down what's going wrong here and fix it properly.

What's Causing the Issues? #

First, let's unpack your original code problem:

const newEvent = this.state.event
newEvent[event.target.name] = event.target.value

When you assign this.state.event to newEvent, you're just creating a reference to the existing state object—not a true copy. This means modifying newEvent directly mutates the component's state, which breaks React's core principle of immutable state. This can lead to weird behavior like missed re-renders or inconsistent state values.

Then, when you tried using [...this.state.event], you hit a common gotcha: this.state.event is an object, not an array. Using the array spread operator on an object creates an empty array, and adding properties like title to it results in an array with those extra properties (arrays are just special objects in JS). When you update state with this array, event.title becomes undefined, so your input switches from a controlled component (with a defined value) to an uncontrolled one (with value: undefined)—that's exactly what the warning is alerting you to.

The Correct Fixes #

We need to create a proper copy of the event object before modifying it, then update state with this new object. Here are two reliable approaches:

1. Object Spread Operator (ES6+, Recommended) #

This is the cleanest solution if your environment supports ES6+ features:

onInputChange = event => {
  const { name, value } = event.target;
  // Use functional setState to ensure we're working with the latest state
  this.setState(prevState => ({
    event: {
      // Copy all existing properties from the original event object
      ...prevState.event,
      // Override the specific field we're updating
      [name]: value
    }
  }));
}

• We use prevState in the setState callback because it guarantees we're using the most up-to-date state (critical if you have frequent state updates).
• The ...prevState.event spreads all existing properties of the original event object into a new object, then we overwrite the property matching event.target.name with the new value.

2. Object.assign (For Older Environments) #

If you need to support environments without object spread, use Object.assign instead:

onInputChange = event => {
  const { name, value } = event.target;
  this.setState(prevState => ({
    event: Object.assign({}, prevState.event, { [name]: value })
  }));
}

• Object.assign({}, prevState.event) creates a new empty object and copies all properties from prevState.event into it.
• The third argument { [name]: value } overrides the specific property we want to update.

Verify No Direct State Mutation #

To confirm we're no longer mutating state directly, add some console logs to test:

onInputChange = event => {
  const { name, value } = event.target;
  console.log("Original state BEFORE update:", this.state.event);
  this.setState(prevState => {
    const newEvent = { ...prevState.event, [name]: value };
    console.log("New event object:", newEvent);
    console.log("Original state AFTER creating new object:", this.state.event); // Still unchanged!
    return { event: newEvent };
  });
}

You'll see the original state stays untouched until setState processes the update—exactly how React expects state management to work.

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