React中不使用useState设置局部变量及数组存储异常问题求解

• setState是异步批量更新机制：同一次渲染流程中调用多次setVal，拿到的val始终是本次渲染的初始值，而非前一次更新后的最新值，导致每次concat都是基于初始空数组操作，最终只会保留最后一次计算的对象。
• 变量错误：min1和max1的取值来源写反，且React代码中未声明变量n，obj的初始化语法错误（key2:0后误用冒号而非逗号）。
• 冗余的状态声明：obj不需要用useState声明，属于循环内的临时变量，无需设置为响应式状态。

不要在循环内反复调用状态更新方法，先参照原生JS的逻辑计算出完整数组，再一次性更新状态即可，修复后代码如下：

import { useRef, useState } from 'react';

const Demo = () => {
  const maxFreq = useRef();
  const minFreq = useRef();
  const [val, setVal] = useState([]);
  const colors = ['#000000', '#0004BF', '#0008FF', '#0140FF', '#0080FF', '#03BFFF', '#02FBFF', '#41FBBF', '#81FC81', '#BFFD41', '#FFFF00', '#FFBF01', '#FF8001', '#FF4000', '#BF2500', '#801500', '#FFFFFF'];
  const n = 16;

  const handleClick = (e) => {
    e.preventDefault();
    // 修正max和min的取值来源，转为数字类型避免运算异常
    const max1 = Number(maxFreq.current.value);
    const min1 = Number(minFreq.current.value);
    const lmin = Math.log(min1);
    const lmax = Math.log(max1);
    const delta = (lmax - lmin) / (n - 1);
    // 先在局部变量中计算完整数组
    const tempArr = [];
    for (let i = 1; i < 16; i++) {
      const obj = {
        key2: Math.exp(lmin + delta * (i - 1)).toFixed(2),
        key1: Math.exp(lmin + delta * i).toFixed(2),
        value: colors[i]
      };
      tempArr.push(obj);
    }
    // 一次性更新状态
    setVal(tempArr);
    console.log(tempArr);
  };

  // 输入框和按钮渲染逻辑，ref正常绑定到对应元素即可
  return (
    <form onSubmit={handleClick}>
      <input ref={minFreq} type="number" placeholder="最小值" />
      <input ref={maxFreq} type="number" placeholder="最大值" />
      <button type="submit">提交</button>
    </form>
  );
};

• 如果变量仅在单次函数执行（比如事件回调）中使用，不需要跨渲染周期保留值，直接用普通的let/const声明即可，和原生JS用法完全一致，比如上述代码中的tempArr、obj都是局部变量。
• 如果变量需要跨渲染周期保留值，但是修改时不需要触发组件重新渲染，可以用useRef存储，修改时直接修改ref.current属性即可，该操作不会触发组件重渲染。

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