时间戳

首页 > 解决方案 > 反应严格模式

javascript - 反应严格模式

问题描述

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

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
    };

标签： javascriptreactjs

解决方案

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

检测意外的副作用

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

推荐阅读