React中修改对象数组状态后，如何重新渲染组件？

Hey there! The key issue here is that you can't directly modify this.state in React—doing so won't trigger a component re-render. You need to use the this.setState() method properly, while also respecting React's state immutability rules. Let's fix your updateData function step by step.

The Problem with Direct State Modification #

When you mutate this.state.list directly (like changing an item inside the array without creating a new copy), React can't detect the change, so it won't re-render your component to show the updated state.

Fixed updateData Function #

Here's how to properly update your state and trigger a re-render:

updateData(item1, item2) {
  if (!item1 || !item2) {
    return 'Enter valid item1 or item2 to modify the item';
  }

  // Create a copy of the original list array to avoid mutating state directly
  const updatedList = [...this.state.list];
  
  updatedList.forEach((item, index) => {
    // Assuming item1 is the property name you want to match, item2 is the new value
    if (item.hasOwnProperty(item1)) {
      // Create a new object instead of modifying the existing one (immutability!)
      updatedList[index] = { ...item, [item1]: item2 };
    }
  });

  // Update state with the new array—this tells React to re-render
  this.setState({ list: updatedList });
}

Key Points to Remember: #

• Never mutate state directly: Always create copies of arrays/objects before modifying them. We use the spread operator ([...this.state.list] and { ...item }) to make shallow copies.
• Use this.setState(): This method signals React that state has changed, triggering a re-render with the updated values.
• Dynamic property names: We use [item1] in the object literal to set the property name dynamically based on your item1 parameter.

Full Component Example #

To put it all together, here's how your class component might look:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [{ test: 2 }, { test33: 4 }]
    };
    // Bind the function to the component instance so `this` works correctly
    this.updateData = this.updateData.bind(this);
  }

  updateData(item1, item2) {
    if (!item1 || !item2) {
      return 'Enter valid item1 or item2 to modify the item';
    }

    const updatedList = [...this.state.list];
    
    updatedList.forEach((item, index) => {
      if (item.hasOwnProperty(item1)) {
        updatedList[index] = { ...item, [item1]: item2 };
      }
    });

    this.setState({ list: updatedList });
  }

  render() {
    return (
      <div>
        <button onClick={() => this.updateData('test', 10)}>Update test value</button>
        <button onClick={() => this.updateData('test33', 20)}>Update test33 value</button>
        <ul>
          {this.state.list.map((item, index) => (
            <li key={index}>{JSON.stringify(item)}</li>
          ))}
        </ul>
      </div>
    );
  }
}

What Happens Now? #

When you call updateData (like from a button click), it creates a new copy of the list, updates the matching item without altering the original state, and uses this.setState() to prompt React to re-render the component. You'll immediately see the updated values in your UI!

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