React 材料 UI 自动完成不适用于 formik

Question

我有这个代码片段，它是别人写的。

 <FormControl className={classes.formControl}>
                            <InputLabel id="combo-box-demo">
                              {values.type === "forAllCustomers" ? "" : ""}
                            </InputLabel>
                           
                            <Autocomplete
                              id="combo-box-demo"
                              name="customerId"
                              onBlur={handleBlur}
                              onChange={handleChange}
                              value={values.customerId}
                              options={agents}
                              getOptionLabel={(option) => option.name}
                              disabled={values.type === "forAllCustomers"}
                              renderTags={(value, getTagProps) => {
                                filteredAgents(values.type).map(
                                  (option, agentId) => (
                                    <Chip
                                      variant="outlined"
                                      label={option.name}
                                      // size="small"
                                      {...getTagProps({ agentId })}
                                    />
                                  )
                                );
                              }}
                              renderInput={(params) => (
                                <TextF
                                  {...params}
                                  variant="outlined"
                                  label="Customer"
                                  placeholder="Select"
                                  name="agentId"
                                />
                              )}
                            />
                          </FormControl>

在这里我们加载了一堆agents 。 如果用户选择一个代理，则该代理id应设置为customerId 。

这里我们使用formik，所以onBlur={handleBlur} onChange={handleChange}由formik控制。

我尝试将value设置为values.customerId但它似乎不起作用而且我在控制台中收到错误消息

index.js:1 Material-UI：自动完成的getOptionLabel方法返回未定义，而不是“”的字符串。

我该如何解决这个问题？

任何帮助！

提前致谢。 =)

Answer 1

看， AutoComplete的function onChange的签名是：

function(event: object, value: T | T[], reason: string) => void

但是， handleChange的 handleChange 签名是

handleChange: (e: React.ChangeEvent<any>) => void

问题是简单地传递onChange={handleChange}不会按照您的想法进行。

看，如果你在return语句之前放置一个console.log(values) ，你会看到你的initialValues object。但是，自动完成中的更改将用奇怪combo-box-demo-option-0 1 填充这个 object， 2 等等。 这是因为自动完成组件如何处理 combobox 以及name和id属性。 根据 Formik 的说法， handleChange会寻找 name 或 id 来操作，没有你想要的对应关系。

说得够多了，要解决您的问题，您必须使用 Formik 提供的另一种方法： setFieldValue

你的自动完成应该看起来像这样：

<Autocomplete
  id="combo-box-demo"
  name="customerId"
  onChange={(e, v) => {
    setFieldValue("name", v?.name || "");
    setFieldValue("customerId", v?.id || "");
  }}
  value={values}
  options={agents}
  getOptionLabel={(option) => option.name || ''}
  style={{ width: 300 }}
  renderInput={(params) => (
    <TextField {...params} label="Combo box" variant="outlined" />
  )}
/>;

您将不需要useState ，因为您不处理自己的任何 state 更改。 一个普通的 javascript object 就足够了。

Answer 2

请检查您获得的代理。 来自 API RESPONSE 或其他任何地方的代理数据可能存在问题。 根据Material-UI ，您传递给选项的参数应该在数组中，但您的参数可能是Object 。

请将代理的数据类型转换为数组，而不是Object如果它不在数组中，它将起作用！

               <Autocomplete
                 id="combo-box-demo"
                 name="customerId"
                 onBlur={handleBlur}
                 onChange={handleChange}
                 value={values.customerId}
                 options={agents} //This should be in An Array
                 getOptionLabel={(option) => option.name} //Then access name
                 disabled={values.type === "forAllCustomers"}
                 />

请查看官方文档 Material-UI https://material-ui.com/components/autocomplete/