0

老实说，除了“这里发生了什么？”之外，我正在努力想出一种表达这个问题的方法。采用以下旨在将增量项目添加到列表的 React 代码：

import React, { useState } from "react";
import "./styles.css";

let counter = 0;

export default function App() {
  const [list, setList] = useState([]);

  console.info("Render:", counter, list.join());

  return (
    <div className="App">
      {list.join()}
      <button
        onClick={() => {
          setList((prevList) => {
            console.info("Pre-push:", counter, prevList.join());
            const newList = [...prevList, "X" + ++counter];
            console.info("Post-push:", counter, newList.join());
            return newList;
          });
        }}
      >
        Push
      </button>
    </div>
  );
}

如果您使用https://codesandbox.io/s/amazing-sea-6ww68?file=/src/App.js运行该代码并单击“Push”按钮四次，我希望看到“X1”然后“ X1,X2”然后是“X1,X2,X3”，然后是“X1,X2,X3,X4”。够简单吧？相反，它会渲染“X1”然后是“X1,X3”然后是“X1,X3,X5”然后是“X1,X3,X5,X7”。

现在我想，“嗯，也许增量函数counter被调用了两次？”，所以我添加了控制台日志，你看到了，这只让我更加困惑。在控制台中，我看到：

Render: 0 "" 
Pre-push: 0 "" 
Post-push: 1 X1 
Render: 1 X1 
Pre-push: 1 X1 
Post-push: 2 X1,X2 
Render: 2 X1,X2 
Pre-push: 3 X1,X3 
Post-push: 4 X1,X3,X4 
Render: 4 X1,X3,X4 
Pre-push: 5 X1,X3,X5 
Post-push: 6 X1,X3,X5,X6 
Render: 6 X1,X3,X5,X6

请注意，控制台中的连接列表与 React 呈现的连接列表不匹配，没有记录如何counter从 2 -> 3 和 4 -> 5 碰撞，并且列表的第三项神秘地发生了变化，尽管事实上，我只附加到列表中。

值得注意的是，如果我将委托++counter移出，它会按预期工作：setList

import React, { useState } from "react";
import "./styles.css";

let counter = 0;

export default function App() {
  const [list, setList] = useState([]);

  console.info("Render:", counter, list.join());

  return (
    <div className="App">
      {list.join()}
      <button
        onClick={() => {
          ++counter;
          setList((prevList) => {
            console.info("Pre-push:", counter, prevList.join());
            const newList = [...prevList, "X" + counter];
            console.info("Post-push:", counter, newList.join());
            return newList;
          });
        }}
      >
        Push
      </button>
    </div>
  );
}

这到底是怎么回事？useState我怀疑counter这与 React 纤程和console它可以选择性地抑制日志，这看起来很疯狂......

4

1 回答 1

1

似乎它被调用了两次，因为它是。

在严格模式下运行时，React在开发模式下运行时会故意调用以下方法两次：

严格模式不能自动为您检测副作用，但它可以通过使它们更具确定性来帮助您发现它们。这是通过有意双重调用以下函数来完成的：
  • 类组件构造函数、render 和 shouldComponentUpdate 方法
  • 类组件静态 getDerivedStateFromProps 方法
  • 功能组件体
  • 状态更新函数（setState 的第一个参数）
  • 传递给 useState、useMemo 或 useReducer 的函数

不确定 console.log 调用会发生什么，但我敢打赌，如果您切换到生产模式，这个问题就会消失。

于 2021-10-20T01:40:05.080 回答