在 React [重复] 中将嵌套对象/数组变异为状态

Question

我正在使用看起来像这样的 React 组件（我使用的组件的简化版本，如下所示）。

我的问题是：如何制作相同但使用 this.setState？ 下面的代码有效，但我直接改变状态，我收到以下警告：

不要直接改变状态。使用 setState()

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      playerState: [
        {
          name: 'Jack',
          hp: 30
        },{
          name: 'Alan',
          hp: 28
        }
      ],
    };
  }
  lowerPlayerHealth = (index) => () => {
    this.state.playerState[index].hp = this.state.playerState[index].hp - 1
    this.forceUpdate();
  }
  render() {
    return (
      <div className="App">
        <p>Player 1: {this.state.playerState[0].name}</p>
        <p>Health: {this.state.playerState[0].hp}</p>
        <button onClick={this.lowerPlayerHealth(0)}>Hit player 1</button>
        <p>Player 2: {this.state.playerState[1].name}</p>
        <p>Health: {this.state.playerState[1].hp}</p>
        <button onClick={this.lowerPlayerHealth(1)}>Hit player 2</button>
      </div>
    );
  }
}

渲染后是这样的：

Answer 1

您已经回答了自己的问题：不要改变状态。此外，最佳实践建议使用 setState 的函数版本。

由于playerState 是一个数组，所以使用Array.map to create a new array containing the same objects，只替换您要更改的那个：

lowerPlayerHealth = (indexToUpdate) => () => {
  this.setState(state => ({
    ...state,
    playerState: state.playerState.map(
      (item, index) => index === indexToUpdate
        ? {
          ...item,
          hp: item.hp - 1
        }
        : oldItem
    )
  }));
}

如果您将playerState 设为对象 而不是数组，则可以使其更整洁：

lowerPlayerHealth = (indexToUpdate) => () => {
  this.setState(state => ({
    ...state,
    playerState: {
      ...state.playerState,
      [indexToUpdate]: {
        ...state.playerState[indexToUpdate],
        hp: state.playerState[idToindexToUpdatepdate].hp - 1
      }
    }
  }));
}

Answer 2

如果要修改状态中的现有值，千万不要直接从状态中获取值并更新状态对象，而是使用setState 中的更新函数，这样可以保证状态值是更新状态时需要的那些。这就是 React 的状态工作原理，这是一个非常常见的 React 错误。

来自official docs

setState() 并不总是立即更新组件。有可能 批处理或推迟更新。这使得阅读 this.state 就在调用 setState() 之后，这是一个潜在的陷阱。相反，使用 componentDidUpdate 或 setState 回调（setState(updater, 回调）），其中任何一个都保证在更新后触发 已应用。如果需要根据前面的设置状态 状态，请阅读下面的更新程序参数。

setState() 总是会导致重新渲染，除非 shouldComponentUpdate() 返回 false。如果可变对象正在 使用和条件渲染逻辑无法实现 shouldComponentUpdate()，只有在新状态时才调用 setState() 与之前的状态不同将避免不必要的重新渲染。

第一个参数是一个带有签名的更新函数：

(state, props) => stateChange

state 是对更改时组件状态的引用 被应用。它不应该直接突变。相反，改变 应该通过基于来自的输入构建一个新对象来表示 状态和道具。

updater 函数接收到的 state 和 props 都是有保证的 是最新的。更新器的输出与 状态。

因此，当您想使用 updater 函数的第一个参数更新 setState 函数内的组件时，您必须准确获取该值。

lowerPlayerHealth = (index) => () => {
    // use setState rather than mutating the state directly
    this.setState((state, props) => {
    // state here is the current state. Use it to update the current value found in state and ensure that it will be set correctly
      return (state); // update state ensuring the correct values
    });
  }

解决方案

降低在状态中找到的值：

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      playerState: [
        {
          name: 'Jack',
          hp: 30
        }, {
          name: 'Alan',
          hp: 28
        }
      ],
      };
  }

  lowerPlayerHealth = (index) => () => {
    this.setState((state, props) => {
      state.playerState[index].hp -=1; //update the current value found in state
      return (state); // update state ensuring the correct values
    });
  }

  render() {
    return (
      <div className="App">
        <p>Player 1: {this.state.playerState[0].name}</p>
        <p>Health: {this.state.playerState[0].hp}</p>
        <button onClick={this.lowerPlayerHealth(0)}>Hit player 1</button>
        <p>Player 2: {this.state.playerState[1].name}</p>
        <p>Health: {this.state.playerState[1].hp}</p>
        <button onClick={this.lowerPlayerHealth(1)}>Hit player 2</button>
      </div>
      );
  }
}