点击表单下拉建议项同步设置locationVal并提交时状态未更新如何解决

React 中的状态更新（比如setLocationVal）是异步批量执行的，调用更新函数后状态不会立刻生效，因此紧接着调用handleSubmit时读取到的还是更新前的旧locationVal值。

直接将选中的选项值作为参数传入提交函数，不需要等待状态更新，改动最小且无额外副作用：

1. 修改下拉项点击逻辑 #

<ul >
  {autoCompleteValues.map((option, index) => (
    <li
      key={index}
      onClick={(e) => {
        setLocationVal(option);
        handleSubmit(e, option) // 新增传入选中的选项值
      }}
    >
      {option}
    </li>
  ))}
</ul>

2. 修改提交函数接收可选参数 #

给handleSubmit加一个可选的入参，点击下拉传入值时优先用传入值，按钮提交时默认用状态中的值，完全兼容原有逻辑：

// 新增第二个可选参数，默认值为当前state中的locationVal
const handleSubmit = async (e, submitLocationVal = locationVal) => {
  e.preventDefault();
  // 后续所有用到locationVal的地方替换为submitLocationVal
  if (submitLocationVal.length > 0) {
    const { latitude, longitude } = await getCityCoord(submitLocationVal);
    query = {
      ...query,
      lat: latitude,
      lon: longitude,
      searchVal,
      locationVal: submitLocationVal,
      distance,
    };
  }
  query = { ...query, searchVal, offset: 0, distance };
  setQuery(query);
  setCurrentPageNum(1);
};

方案2：通过useEffect监听状态更新后提交 #

如果不想修改提交函数的参数，可以加一个状态标记控制提交时机：

// 新增状态标记
const [shouldSubmit, setShouldSubmit] = useState(false);

// 下拉项点击逻辑修改
onClick={(e) => {
  setLocationVal(option);
  setShouldSubmit(true);
}}

// 新增监听逻辑
useEffect(() => {
  if (shouldSubmit) {
    handleSubmit(new Event('submit'));
    setShouldSubmit(false);
  }
}, [locationVal, shouldSubmit])

方案3：强制同步更新状态 #

可以用flushSync强制让状态立刻更新，适合小范围快速修改：

import { flushSync } from 'react-dom';

// 下拉项点击逻辑修改
onClick={(e) => {
  flushSync(() => {
    setLocationVal(option);
  })
  // 此时locationVal已经更新完成
  handleSubmit(e)
}}

注意：该方法会打断React的批量更新机制，可能产生性能损耗，仅适合小场景使用。

你当前用div绑定onSubmit是不生效的，原生submit事件仅支持form标签，建议把表单容器改为<form onSubmit={handleSubmit}>，否则点击type="submit"的按钮无法触发提交逻辑。

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