React ES6中如何优雅修改表单组件状态内的嵌套数据？

Great question! Your goal to eliminate hardcoded conditionals and make state updates dynamic for any nested object is spot-on—let's break down how to achieve this cleanly, while following React's best practices for immutable state updates.

The Core Problem with Your Current Approach #

Your existing solutions rely on hardcoding field names (street, city) and nested object names (address), which becomes unmaintainable as your form grows (e.g., adding user.profile or billing.address later). Plus, directly mutating the state object (like in your second refactor) can lead to subtle bugs in React, since state should always be treated as immutable.

The Better Approach: Structured name Attributes + Generic State Updates #

The key is to encode the nested path directly into your input's name attribute, using a separator like a dot (.). Then, we can write a generic function to parse this path and update the state immutably—no conditionals required.

Step 1: Update Your Form Inputs

First, adjust your input elements to use structured names that reflect the state hierarchy:

<!-- Nested address fields -->
<input type="text" name="address.street" value={this.state.form.address.street} onChange={this.onChange} />
<input type="text" name="address.city" value={this.state.form.address.city} onChange={this.onChange} />

<!-- Top-level form fields -->
<input type="text" name="username" value={this.state.form.username} onChange={this.onChange} />
<input type="checkbox" name="subscribe" checked={this.state.form.subscribe} onChange={this.onChange} />

<!-- Even deeper nesting works too! -->
<input type="number" name="user.profile.age" value={this.state.form.user?.profile?.age} onChange={this.onChange} />

Step 2: Write a Generic Immutable Update Function

Create a helper function that takes your current state object, a path string (like address.street), and a new value, then returns a new immutable object with the update applied:

const updateNestedState = (obj, path, value) => {
  const keys = path.split('.');
  // Use reduce to recursively build the updated object
  return keys.reduce((acc, key, index) => {
    // If we're at the last key, set the value
    if (index === keys.length - 1) {
      return { ...acc, [key]: value };
    }
    // For nested keys, recurse—create an empty object if the key doesn't exist
    return { ...acc, [key]: updateNestedState(acc[key] || {}, keys.slice(index + 1), value) };
  }, obj);
};

Step 3: Simplify Your onChange Handler

Now your onChange becomes completely generic—no more conditionals, and it works for any nested or top-level field:

onChange(event) {
  const { form } = this.state;
  const target = event.target;
  // Handle checkbox values correctly
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const name = target.name;

  // Generate the updated form state immutably
  const updatedForm = updateNestedState(form, name, value);
  this.setState({ form: updatedForm });
}

Bonus: Use immer for Even Cleaner Code #

If you don't want to write your own nested update function, libraries like immer make immutable state updates trivial. Here's how you could rewrite the handler with immer:

import produce from 'immer';

onChange(event) {
  const target = event.target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const keys = target.name.split('.');

  this.setState(produce(draft => {
    let current = draft.form;
    // Traverse the nested path
    for (let i = 0; i < keys.length - 1; i++) {
      // Create empty objects if the path doesn't exist
      current = current[keys[i]] || (current[keys[i]] = {});
    }
    // Set the final value
    current[keys[keys.length - 1]] = value;
  }));
}

Why This Works #

• No hardcoded logic: Add any new field (nested or not) just by updating the input's name attribute.
• Immutable updates: We never modify the original state object, which keeps React's state management predictable and avoids bugs related to state mutation.
• Scalable: This approach works for any depth of nesting, so your form can grow without rewriting state update logic.

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