反应严格模式

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

反应StrictMode会导致在开发过程中调用渲染函数两次，以识别意外的副作用

Answer 2

通过有意重复调用某些生命周期方法和React钩子，帮助暴露无意的副作用。setStateupdater函数被调用两次。我将把深入的解释留给链接的问题。

检测意外的副作用

当您将新元素推入之前的tickets状态时，以及当您预先减少remainingTickets状态时，您无意中产生的副作用是之前的tickets状态的状态突变。帽子戏法是你也不会返回一个新的ticketsarray referece。

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],
}));