如何利用先前状态实现点击按钮递减count值？

你提供的代码存在状态更新路径错误的问题：state里的count是嵌套在data数组的对象中，但handle方法更新的是根级别的count，这会导致页面无法正确渲染更新后的数值。以下是修正后的实现：

import { Component } from 'react';

export default class App extends Component {
  state = {
    data: [{ name: "Zuko", count: 1 }],
  };

  handle = () => {
    this.setState((prevState) => {
      // 复制原数组，保证状态不可变性
      const updatedData = [...prevState.data];
      // 复制目标对象并更新count值
      updatedData[0] = {
        ...updatedData[0],
        count: updatedData[0].count - 1
      };
      return {
        ...prevState,
        data: updatedData
      };
    });
  };

  render() {
    return (
      <>
        <p>{this.state.data[0].count}</p>
        <button onClick={this.handle}>点击递减</button>
      </>
    );
  }
}

关键要点说明： #

• 函数式更新：用setState(prevState => { ... })的形式，确保获取到的是最新的先前状态，避免React异步更新带来的状态不一致问题。
• 状态不可变性：不能直接修改prevState.data或prevState.data[0]，必须通过展开运算符(...)复制数组和对象，再修改新副本，这是React状态更新的核心规则。
• 正确的状态路径：更新目标是state.data[0].count，需要逐层复制并更新对应的嵌套属性，才能让组件感知到状态变化并重新渲染。

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