反应严格模式

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通过有意双重调用某些生命周期方法和响应钩子来帮助暴露意外的副作用。setState更新器函数是一个调用两次的函数。我将把深入的解释留给相关的问题。

发现意想不到的副作用

您无意中的副作用是当您在预减少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],
}));

Answer 2

React.StrictMode使呈现函数在开发过程中被调用两次，以识别意外的副作用。