React中Select组件默认值不生效问题求助

我尝试为FormField的select输入框设置默认选中值「All」，但组件在手动修改前无法识别这个默认值。

相关代码 #

import "./styles.css";
import React, { useState } from "react";
import { FormField } from "react-form-input-fields";
import "react-form-input-fields/dist/index.css";

export default function App() {
  let [type, setType] = useState("All");
  const types = [
    { label: "All", value: "All" },
    { label: "Afganistan", value: "Afganistan" },
    { label: "Albania", value: "Albania" },
    { label: "Algeria", value: "Algeria" },
    { label: "American Samoa", value: "American Samoa" },
    { label: "Andorra", value: "Andorra" },
    { label: "Angola", value: "Angola" }
  ];

  function handletype(e) {
    setType(e);
  }

  return (
    <div className="App">
      <FormField
        type="select"
        value={type}
        option={types}
        label="Select your type"
        keys="label"
        handleOnChange={(value) => handletype(value)}
      />
    </div>
  );
}

问题出在FormField组件的keys属性配置上，当前仅设置了keys="label"，组件无法正确关联选项的value字段与你的默认值。

修复步骤 #

1. 调整keys属性为对象格式，明确指定选项的标签和值对应的字段名：keys={{ label: "label", value: "value" }}
2. 确保useState初始值"All"与选项数组中对应项的value完全匹配（你的代码已满足此条件）

修改后的FormField代码：

<FormField
  type="select"
  value={type}
  option={types}
  label="Select your type"
  keys={{ label: "label", value: "value" }}
  handleOnChange={(value) => handletype(value)}
/>

调整后组件就能正确识别并显示初始默认选中值「All」。

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