已解决：Next.js+TypeScript中根据选中ID自动更新姓名字段

问题回顾 #

尝试通过选中的employeeId自动填充员工姓名字段，控制台打印employeeIDOptions时能看到完整的firstName和lastName数据，但姓名字段始终无法自动更新。

排查结论 #

问题根源在于自定义的InputLabel组件内部存在抽象逻辑，阻止了systemUsersPayload.employeeName状态值正确同步到输入框。

修正方案 #

针对InputLabel组件的限制，调整代码确保姓名字段能正确响应状态变化：

核心逻辑保留（无需修改） #

// 员工数据获取
const { data: employeeID, error: employeeIDError } = useGetRequest(
    "/EmployeeRecord/all"
) as { data: any; error: any };

// 生成下拉框选项
const employeeIDOptions = employeeID?.map((type: any) => ({
    label: type.nextOfKinResponse.employeeID,
    value: type.id,
    firstName: type.firstName,
    lastName: type.lastName,
}));

// 监听employeeId变化，同步姓名
useEffect(() => {
    const selectedEmployee = employeeIDOptions?.find(
        (option: any) => option.value === systemUsersPayload.employeeId
    );
    if (selectedEmployee) {
        setSystemUsersPayload((prev) => ({
            ...prev,
            employeeName: `${selectedEmployee.firstName} ${selectedEmployee.lastName}`,
        }));
    }
}, [systemUsersPayload.employeeId, employeeIDOptions])

修正姓名字段的组件使用 #

针对InputLabel的内部限制，可通过以下两种方式修复：

1. 强制触发组件重新渲染：

<InputLabel
    label="Employee Name"
    id="employee-name"
    type="text"
    placeholder="John Praise Anoki"
    value={systemUsersPayload.employeeName}
    onChange={(e) => {
        setSystemUsersPayload((prev) => ({
            ...prev,
            employeeName: e.target.value,
        }));
    }}
    // 通过key值变化强制组件刷新，确保value同步
    key={`employee-name-${systemUsersPayload.employeeName}`}
/>

2. 替换为原生输入组件（若业务允许）：

<div className="input-group">
    <label htmlFor="employee-name">Employee Name</label>
    <input
        id="employee-name"
        type="text"
        placeholder="John Praise Anoki"
        value={systemUsersPayload.employeeName}
        onChange={(e) => {
            setSystemUsersPayload((prev) => ({
                ...prev,
                employeeName: e.target.value,
            }));
        }}
    />
</div>

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