Javascript 在用户键入时加载异步选项的“反应选择动态”下拉列表

我是一个新的反应，我正在尝试合并两个不同的功能。一个动态表单，您可以在其中添加和/或删除输入，一个使用async react select的表单，您可以在其中开始键入单词，并显示选项，并根据API源进行筛选（例如，基于连接的用户）

我几乎完成了（我想），但是：

当我开始输入时，我正确地看到了我的选项…选项被正确地过滤，但是当我点击一个项目（选择这个项目）时，我得到了一个错误

我遇到的错误是

无法读取未定义的
的属性“name”，但我不理解它，也不确定这是我遇到的唯一问题。我不知道如何让我的选择正确地被选中并正确地放入我的对象数组（
inputFields
）

以下是我尝试混合的两种不同来源（它们都能独立完美地工作）

反应选择异步下拉列表：
动态表单字段：

谢谢你帮助我了解问题所在

这是我的密码：

function AsyncDynamicForm(props) {
  const [inputFields, setInputFields] = useState([
    { firstName: '' },
  ]);
  const [inputValue, setValue] = useState("");


  const handleChangeInput = (index, event) => {
    const values = [...inputFields];
    values[index][event.target.name] = event.target.value;
    setInputFields(values);
  };

  const AddFields = () => {
    setInputFields([...inputFields, { firstName: '' }]);
  };

  const RemoveFields = (index) => {
    const values = [...inputFields];
    values.splice(index, 1);
    setInputFields(values);
  };


  const loadOptions = (inputValue) => {
    return fetch(
      `http://127.0.0.1:8000/api/Objects/?q=${inputValue}`
    ).then((res) => res.json());
  };
    

  const handleInputChange = (value) => {
    setValue(value)
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("inputFields", inputFields); // Nothing for now
  };


  return (
    <div>
        <Container>
          <Form onSubmit={handleSubmit}>
            {inputFields.map((inputField, index) => (
              <div key={index}>
                <Form.Field inline>
                  <AsyncSelect
                    name="firstName"
                    value={inputField.firstName}
                    onChange={(event) => handleChangeInput(index, event)}
                    cacheOptions
                    defaultOptions
                    getOptionLabel={(e) => e.name.toString()}
                    getOptionValue={(e) => e.id}
                    loadOptions={loadOptions}
                    onInputChange={handleInputChange}
                  />
                </Form.Field>
                <Button.Group basic size="small">
                  <Button icon="add" onClick={() => AddFields()} />
                  <Button
                    icon="x"
                    onClick={() => RemoveFields(index)}
                  />
                </Button.Group>
              </div>
            ))}
          
            <Button type="submit" onClick={handleSubmit}>
              click
            </Button>
          </Form>
        </Container>
    </div>
  );
}

export default AsyncDynamicForm

函数异步动态表单（props）{
常量[inputFields，setInputFields]=useState([
{firstName:''}，
]);
常量[inputValue，setValue]=useState（“”）；
常量handleChangeInput=（索引、事件）=>{
常量值=[…输入字段]；
值[index][event.target.name]=event.target.value；
设置输入字段（值）；
};
常量AddFields=（）=>{
setInputFields（[…inputFields，{firstName:'}]）；
};
常量RemoveFields=（索引）=>{
常量值=[…输入字段]；
拼接值（索引1）；
设置输入字段（值）；
};
常量加载选项=（输入值）=>{
回传(
`http://127.0.0.1:8000/api/Objects/?q=${inputValue}`
)。然后（（res）=>res.json（））；
};
常量handleInputChange=（值）=>{
设置值（值）
};
常量handleSubmit=（e）=>{
e、 预防默认值（）；
log（“inputFields”，inputFields）；//暂时没有
};
返回(
{inputFields.map（（inputField，index）=>(
handleChangeInput（索引、事件）}
缓存选项
默认选项
getOptionLabel={（e）=>e.name.toString（）}
getOptionValue={（e）=>e.id}
loadOptions={loadOptions}
onInputChange={handleInputChange}
/>
AddFields（）}/>
RemoveFields（索引）}
/>
))}
点击
);
}
导出默认异步动态表单
这一点非常有用。
onChange
道具采用具有特定签名的方法

constonchange=（选项，{action}）=>{
/*“option”值将根据选择的类型而不同
*动作是'option'中的一个，是'option'的数组
*（在多重选择的情况下），`null`（清除时典型
*选项），或“未定义”。
*您实际得到的将取决于select传递的“操作”，
*属于下列情况之一：
*-“选择选项”
*-“取消选择选项”
*-“删除值”
*-“流行价值”
*-“设定值”
*-“清楚”
*-“创建选项”
*/
//示例使用前面定义的“useState”钩子
开关（动作）{
案例“选择选项”，
案例“删除值”，
案例“明确”：
设置颜色（可选）；
打破
违约：
//我现在不担心其他行动
打破
}
};

请记住，React Select将
值
视为整个
选项
对象，而不仅仅是您在
getOptionValue
中定义的
选项
值。如果您正在考虑设置一个真正的表单“value”，您可能会以某种方式包装Select来处理它

React Select功能强大且复杂。文档是您在这里的朋友。我发现在尝试我还不完全了解的功能时，在CodeSandbox中玩会很有帮助。
顺便说一句，我会将您问题的标题改为“为什么在我的异步反应选择中没有调用onChange事件？”