javascript - react 严格模式

Question

我正在处理我的项目，我注意到当打开严格模式时，它会将两个相同的元素插入我的数组中。当严格模式关闭时，它仅将一个元素插入数组。有什么解释为什么会发生这种情况吗？

import {getRandomNumber} from './utils';


export function registerTicket() {
    const newTicket = {
        number: getRandomNumber(),
        color: 'red',
    }
    this.setState((prevState) => {
        prevState.tickets.push(newTicket);
        return {
            remainingTickets: --prevState.remainingTickets,
            tickets: prevState.tickets,

        }
    })
}

这是我的状态。

    this.state = {
      winningNumber: getRandomNumber(),
      remainingTickets: 5,
      tickets: [],
      finished: false
    };

Answer 1

React StrictMode 通过故意重复调用某些生命周期方法和 React Hook 来帮助暴露无意的副作用。 setState 更新器函数被调用两次。我将留下对链接问题的深入解释。

Detecting unexpected side-effects

当您将新元素插入其中时，您无意中的副作用是先前 tickets 状态的状态突变和当您预- 减少 remainingTickets 状态。帽子戏法是，您也不会返回新的 tickets 数组引用。

this.setState((prevState) => {
  prevState.tickets.push(newTicket); // <-- mutation!!
  return {
    remainingTickets: --prevState.remainingTickets, // <-- mutation!!
    tickets: prevState.tickets, // <-- same old array reference
  }
})

解决方案是将先前的状态数组浅复制到新的数组引用中并附加新元素。

this.setState((prevState) => ({
  remainingTickets: prevState.remainingTickets - 1,
  tickets: [...prevState.tickets, newTicket],
}));