React父子组件状态管理架构及表格实现技术咨询

Let's tackle your problems one by one—from state management to button logic, we'll get this table working smoothly.

First: Fix the Parent Component's State Mutation & Add/Remove Logic #

Your current addChild method is mutating the state directly with push (which React can't detect), and the onClick is calling the function immediately instead of passing a reference. Here's the corrected version:

import React, { Component } from "react";
import Child from "./Child";

export default class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        { name: "apple", currentCode: "BJ3343", previousCode: " ", region: "opt2", isNew: false, isDirty: false },
        { name: "cherry", currentCode: "AS3433", previousCode: " ", region: "opt1", isNew: false, isDirty: false }
      ]
    };
    // Bind methods to preserve context
    this.addChild = this.addChild.bind(this);
    this.removeChild = this.removeChild.bind(this);
    this.updateChild = this.updateChild.bind(this);
  }

  addChild() {
    // Create a new array instead of mutating existing state
    const newBlankItem = { 
      name: "", 
      currentCode: "", 
      region: "", 
      isNew: true, 
      isDirty: false 
    };
    this.setState(prevState => ({
      list: [...prevState.list, newBlankItem]
    }));
  }

  removeChild(selectedIndices) {
    // Remove selected children without mutating state
    this.setState(prevState => ({
      list: prevState.list.filter((_, index) => !selectedIndices.includes(index))
    }));
  }

  updateChild(index, updatedData) {
    // Update a specific child safely
    this.setState(prevState => ({
      list: prevState.list.map((item, i) => 
        i === index ? { ...item, ...updatedData } : item
      )
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.addChild}>Add Child</button>
        <button onClick={() => {
          // Get selected checkbox indices
          const selected = Array.from(document.querySelectorAll('input[name="selection"]:checked'))
            .map(input => parseInt(input.dataset.index));
          this.removeChild(selected);
        }}>Remove Child</button>
        <table>
          <thead>
            <tr>
              <td />
              <td>Region</td>
              <td>Code</td>
              <td>Name</td>
              <td>Actions</td>
              <td>Cancel</td>
            </tr>
          </thead>
          <tbody>
            {this.state.list.map((item, index) => (
              <Child 
                key={index} 
                index={index} 
                initialData={item} 
                updateChild={this.updateChild} 
              />
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

Key fixes here:

• Used functional setState to safely modify the list (no direct state mutation)
• Bound methods in the constructor to keep this context correct
• Added updateChild so children can sync saved state back to the parent
• Fixed the Add Child button to pass the function instead of calling it immediately

Second: Child Component State Management & Button Logic #

Your child component was directly using props for rendering, which prevented it from managing independent edits and cancel actions. Let's refactor it to own its state and handle all required logic:

import React, { Component } from "react";

export default class Child extends Component {
  constructor(props) {
    super(props);
    // Initialize internal state with parent's initial data
    this.state = {
      ...this.props.initialData,
      // Store original state for cancel functionality
      originalState: { ...this.props.initialData },
      // Default to showing Generate for new children
      showGenerate: this.props.initialData.isNew
    };
    this.handleInputChange = this.handleInputChange.bind(this);
    this.generateCode = this.generateCode.bind(this);
    this.saveCode = this.saveCode.bind(this);
    this.cancel = this.cancel.bind(this);
  }

  handleInputChange(e) {
    const { name, value } = e.target;
    this.setState(prevState => ({
      ...prevState,
      [name]: value,
      isDirty: true,
      // Switch from Generate to Save if user edits name in a new child
      ...(prevState.isNew && name === "name" ? { showGenerate: false } : {})
    }));
  }

  async generateCode() {
    // Simulate API call
    try {
      const responseCode = await new Promise(resolve => setTimeout(() => resolve(Math.floor(Math.random() * 1000)), 500));
      this.setState(prevState => ({
        ...prevState,
        currentCode: responseCode,
        isDirty: true
      }));
    } catch (err) {
      console.error("Failed to generate code:", err);
    }
  }

  async saveCode() {
    // Simulate API save
    try {
      await new Promise(resolve => setTimeout(resolve, 500));
      // Sync saved state to parent and reset internal state
      this.props.updateChild(this.props.index, {
        ...this.state,
        isNew: false,
        isDirty: false
      });
      this.setState(prevState => ({
        ...prevState,
        isNew: false,
        isDirty: false,
        originalState: { ...prevState }
      }));
    } catch (err) {
      console.error("Failed to save code:", err);
    }
  }

  cancel() {
    // Revert to original state
    this.setState(prevState => ({
      ...prevState.originalState,
      isDirty: false,
      showGenerate: prevState.originalState.isNew
    }));
  }

  render() {
    const { region, currentCode, name, isNew, isDirty, showGenerate } = this.state;
    const isRegionSelected = region !== "";

    return (
      <tr>
        <td>
          <input 
            type="checkbox" 
            name="selection" 
            data-index={this.props.index} 
          />
        </td>
        <td>
          <select 
            disabled={!isNew} 
            name="region" 
            value={region} 
            onChange={this.handleInputChange}
          >
            <option value="">Select</option>
            <option value="opt1">opt1</option>
            <option value="opt2">opt2</option>
            <option value="opt3">opt3</option>
            <option value="opt4">opt4</option>
          </select>
        </td>
        <td>
          <input 
            disabled={!isNew} 
            type="text" 
            name="currentCode" 
            value={currentCode} 
            onChange={this.handleInputChange}
          />
        </td>
        <td>
          <input 
            type="text" 
            name="name" 
            value={name} 
            onChange={this.handleInputChange}
          />
        </td>
        <td>
          {/* Show Generate for new children unless name was edited */}
          {showGenerate && isNew && (
            <button 
              onClick={this.generateCode} 
              disabled={!isRegionSelected}
            >
              Generate
            </button>
          )}
          {/* Show Save for old children or new children after name edit */}
          {(!isNew || !showGenerate) && (
            <button 
              onClick={this.saveCode} 
              disabled={!isRegionSelected || !isDirty}
            >
              Save
            </button>
          )}
        </td>
        <td>
          <button 
            onClick={this.cancel} 
            disabled={!isDirty}
          >
            Cancel
          </button>
        </td>
      </tr>
    );
  }
}

Key improvements here:

• State Initialization: We copy parent props to the child's internal state in the constructor (no need for componentDidMount/componentWillMount here—constructor is safe for initial setup). We also store an originalState to enable cancel functionality.
• Independent State: Each child manages its own edits, so changes to one don't affect others. The updateChild method syncs saved state back to the parent.
• Button Logic:
  • Old children (isNew: false) only show Save, with Region/Code fields disabled (only Name is editable).
  • New children start with Generate visible; editing Name switches to Save.
  • Generate/Save are only enabled when a Region is selected.
• Cancel Functionality: Reverts to the last saved/initial state and resets isDirty.

Answering Your Core Questions #

1. When to initialize child state? For your use case, the constructor is perfect—we only need to set up initial state from parent props once, and the child owns all subsequent state changes.
2. Why constructor state setup failed before? You were directly rendering props instead of copying them to the child's state. The child needs to own its state to handle independent edits and cancel actions.
3. How to fix parent array issues? By avoiding direct state mutation (use functional setState and spread operators) and having children communicate changes via a parent method.

内容的提问来源于stack exchange，提问作者The Old County