React中如何将更新后的state变量值传递给函数？

问题描述 #

实现表单输入动态更新count状态变量时，提交表单后color能获取到最新值，但count始终是旧值，导致Values.js的all()方法无法接收动态更新的count参数。

核心原因 #

1. 数字输入框的e.target.value返回字符串类型，直接存入count状态后，会使count从初始数字类型变为字符串类型，而Values.js的all()方法需要数字参数，字符串参数会引发异常或不符合预期的行为；
2. 组件闭包特性可能导致handleSubmit捕获到旧的状态值。

解决方法 #

1. 修复count的类型转换问题 #

将数字输入框的输入值显式转换为数字后再存入状态，确保count始终为数字类型：

<input
  type="number"
  value={count}
  onChange={(e) => {
    setCount(Number(e.target.value)); // 转换为数字类型后更新状态
  }}
  style={{ marginLeft: "5px" }}
/>

2. 直接从表单元素获取最新值（彻底避免闭包问题） #

在handleSubmit中直接读取表单元素的当前值，不依赖组件状态，确保拿到提交瞬间的最新输入：

const handleSubmit = (e) => {
  e.preventDefault();
  // 从表单DOM元素直接获取最新输入值
  const currentColor = e.target[0].value;
  const currentCount = Number(e.target[1].value);
  try {
    let colors = new Values(currentColor).all(currentCount);
    setList(colors);
    setError(false); // 成功提交时重置错误状态
  } catch (error) {
    setError(true);
    console.log(error);
  }
};

3. 使用useRef保存最新值 #

如果需要在多个场景访问最新的count，可以用useRef存储，绕过闭包的状态捕获问题：

import { useState, useRef } from "react";

function App() {
  const [color, setColor] = useState("");
  const [error, setError] = useState(false);
  const [count, setCount] = useState(10);
  const countRef = useRef(10); // 初始化ref值
  const [list, setList] = useState(new Values("#f15025").all(10));

  const handleSubmit = (e) => {
    e.preventDefault();
    try {
      // 使用ref的current属性获取最新值
      let colors = new Values(color).all(countRef.current);
      setList(colors);
      setError(false);
    } catch (error) {
      setError(true);
      console.log(error);
    }
  };

  return (
    <>
      {/* 其他代码保持不变 */}
      <input
        type="number"
        value={count}
        onChange={(e) => {
          const num = Number(e.target.value);
          setCount(num);
          countRef.current = num; // 同步更新ref值
        }}
        style={{ marginLeft: "5px" }}
      />
      {/* 其他代码保持不变 */}
    </>
  );
}

额外优化 #

• 提交成功后重置error状态，避免错误样式残留；
• 给数字输入框添加min="1"属性，限制输入有效数值范围。

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