React中赋值新数组后useState未更新问题求助

问题根源 #

你当前在组件函数体直接通过if (numberArray === null)调用resetArray的写法违反了React渲染生命周期规则，会触发无限重渲染循环：

• 组件初始渲染时，numberArray为null，调用resetArray执行setNumberArray，触发组件重新渲染
• 状态更新是异步的，重新渲染时numberArray仍可能处于未更新状态，导致再次进入分支调用resetArray，循环往复
• React会抑制这类异常状态更新，最终导致你看到数组值未正确更新的现象

解决方案1：使用useEffect初始化数组 #

通过useEffect的空依赖数组，让初始化逻辑只在组件挂载时执行一次：

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

export default function SortingVisualizer() {
  const [numberArray, setNumberArray] = useState(null);

  function resetArray() {
    const array = [];
    for (let i = 0; i < 100; i++) {
      let num = randomIntFromInterval(5, 1000);
      array.push(num);
    }
    setNumberArray(array);
  }

  // 组件挂载时仅执行一次初始化
  useEffect(() => {
    resetArray();
  }, []);

  // 避免未初始化时调用map触发报错
  if (!numberArray) return null;

  return (
    <div className="array-container">
      {numberArray.map((value, idx) => {
        return (
          <div className="array-bar" key={idx}>
            {value}
          </div>
        );
      })}
    </div>
  );
}

function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

解决方案2：直接在useState中惰性初始化（更简洁） #

利用useState的惰性初始化特性，直接在初始状态生成数组，无需额外函数：

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

export default function SortingVisualizer() {
  // 惰性初始化数组，仅在组件首次渲染时执行一次
  const [numberArray, setNumberArray] = useState(() => {
    const array = [];
    for (let i = 0; i < 100; i++) {
      array.push(randomIntFromInterval(5, 1000));
    }
    return array;
  });

  function resetArray() {
    const array = [];
    for (let i = 0; i < 100; i++) {
      let num = randomIntFromInterval(5, 1000);
      array.push(num);
    }
    setNumberArray(array);
  }

  return (
    <div className="array-container">
      {numberArray.map((value, idx) => {
        return (
          <div className="array-bar" key={idx}>
            {value}
          </div>
        );
      })}
    </div>
  );
}

function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

额外优化点 #

• 移除了resetArray中循环内的console.log(array)，避免频繁打印影响性能
• 解决方案1中添加了空值判断，防止组件未完成初始化时调用map报错

内容的提问来源于stack exchange，提问作者makekelly