React表单问题：提交时无法获取文本框的最新值

这是典型的闭包陷阱，和useCallback的依赖项设置直接相关！

你用useCallback包裹了handleSubmit，但依赖项数组是空的[]——这意味着这个回调函数只会在组件首次渲染时创建，并且永远不会更新。它捕获的是组件初始化时的url值（也就是空字符串），哪怕后续setUrl更新了状态，这个旧的回调里的url还是停留在初始的空值，自然打印不出最新内容。

下面给你几种针对性的修复方案：

方案1：补充useCallback的依赖项（最直观） #

直接把url加入useCallback的依赖数组，这样每当url变化时，useCallback会重新生成新的回调函数，捕获最新的url值：

const handleSubmit = useCallback(async (_event) => {
  console.log(url);
}, [url]); // 这里添加url作为依赖

方案2：用useRef保存最新状态（避免频繁更新回调） #

如果担心url频繁变化导致handleSubmit反复生成，可以用useRef来同步保存最新的url值，它的.current属性是可变的，不会触发组件重新渲染，且能始终拿到最新数据：

import { useState, useCallback, useRef } from 'react';

// ...
const urlRef = useRef('');
const [url, setUrl] = useState('');

const handleUrlChange = useCallback((value) => {
  setUrl(value);
  urlRef.current = value; // 同步更新ref的当前值
}, []);

const handleSubmit = useCallback(async (_event) => {
  console.log(urlRef.current); // 直接取最新的url值
}, []);

方案3：直接从表单元素取值（绕过状态依赖） #

如果你的表单是标准HTML表单结构，可以在提交时直接从表单元素获取值，不需要依赖组件状态：

const handleSubmit = useCallback(async (event) => {
  event.preventDefault();
  const formData = new FormData(event.target);
  const urlValue = formData.get('url');
  console.log(urlValue);
}, []);

记得给TextField加上name属性，这样FormData才能正确取值：

<TextField 
  value={url} 
  label="Url" 
  type="url" 
  onChange={handleUrlChange}
  name="url" // 新增name属性
/>

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