对原始状态的更改副本做出反应状态更改？

Question

我正在尝试使用 React 制作一个简单的游戏，例如紫色宫殿游戏中的紫色对。我有一个名为 的方法clickBtn，它应该在单击时增加计数并在第二次单击时减少，但我不知道为什么该handleClick方法会更改chosen以及clicked状态属性，即使在不使用方法的情况下制作了新状态的副本setState。你能帮我解决这个问题吗？

class GameBoard extends React.Component {

  constructor() {

    super();

    this.state = {

      score: 0,

      time: 0,

      list: [...generateObList(), ...generateObList()],

      count: 0

    };

  }

  handleClick = (id) => {

    this.clickBtn(id);

    const list = this.state.list.slice();

    const current = list.find((a) => a.id === id);

    for (let x of list) {

      if (x.clicked && x.value == list.find((a) => a.id == id).value) {

        x.chosen = true;

        x.clicked = false;

        current.chosen = true;

        current.clicked = false;

        // this.setState((prev) => ({

        //   list: prev.list.map((el) =>

        //     el.id === id ? current : el.value === current.value ? x : el

        //   ),

        //   score: prev.score + 1

        // }));

      }

    }

  };

  clickBtn = (id) => {

    const current = this.state.list.slice().find((e) => e.id === id);

    let deClick = current.clicked;

    current.clicked = !current.clicked;

    console.log(current);

    this.setState(

      (prev) => ({

        list: prev.list.map((el) => (el.id === id ? current : el)),

        count: prev.count + (deClick ? -1 : 1)

      }),

      () => {

        console.log(this.state.count, deClick, current);

      }

    );

  };

  render() {

    const boardStyle = {

      gridTemplateColumns: `repeat(5, 1fr)`,

      gridTemplateRows: `repeat(5,1r)`

    };

    let list = this.state.list.map((n) => (

      <Card

        value={n.value}

        onClick={(e) => {

          this.handleClick(n.id);

        }}

        show={!n.chosen}

      />

    ));

    return (

      <div class="gameBoard" style={boardStyle}>

        {list}

      </div>

    );

  }

}

Answer 1

slice()只需返回数组的浅表副本，因此如果项目是引用类型（对象），则原始和副本都引用相同的数组项目。对于对象切片，将对象引用复制到新数组中。原始数组和新数组都引用同一个对象。如果对象发生更改，则新数组和原始数组都可以看到这些更改。尝试深度复制对象。您可以使用以下方法轻松进行深度复制：JSON.parse(JSON.stringify(arr))也可以试试lodash的cloneDeep()方法。