redux-form下拉框首次选择时获取的form值为undefined问题求解

问题根因 #

你触发Field组件onChange事件时，redux-form更新redux store中的表单值是异步操作，此时你从props中拿到的favoriteColorValue还是更新前的初始值undefined。后续选择时你拿到的实际是上一次选择后更新完成的store值，本质上逻辑一直慢一拍，只是首次触发时初始值为undefined表现更明显。

修复方案 #

方案一：直接读取事件目标的选中值（推荐） #

不需要依赖store返回的值，直接从onChange事件回调自带的事件对象中取最新选中值，修改Field的onChange属性即可：

<Field
  name="favoriteColor"
  component="select"
  onChange={(e) => onChange(e.target.value)}
>
  {/* 原有option逻辑不变 */}
</Field>

这个方案同步拿到最新值，没有延迟，适合绝大多数表单校验场景。

方案二：监听props值变化触发逻辑 #

如果你必须在store值更新完成后才执行逻辑，可以用useEffect监听favoriteColorValue的变化，把校验逻辑写在副作用回调中：
首先引入useEffect：

import React, { useEffect } from "react";

然后在组件内部添加监听逻辑：

useEffect(() => {
  // 这里拿到的永远是store中最新的favoriteColorValue
  console.log(" Triggered", favoriteColorValue);
  // 你的校验逻辑写在这里
}, [favoriteColorValue])

之后删除Field上绑定的onChange属性即可。

额外注意 #

你的代码中props解构存在拼写错误：subbmitting应为submitting，否则提交按钮的禁用状态会不生效。

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