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

请参见，onChange的函数AutoComplete的签名为：

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

但是，Formik的handleChange的签名是

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

问题在于，仅传递onChange={handleChange}并不能满足您的要求。

如果在return语句之前放置console.log(values)，请参见initialValues对象。但是，自动完成功能的更改将使该对象充满奇怪的combo-box-demo-option-0 1、2，依此类推。这是因为自动完成组件如何处理组合框以及name和id属性。 According to Formik，handleChange将查找要操作的名称或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，因为您不会处理任何状态更改。普通的javascript对象就足够了。

Answer 2

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

如果不在 Array 中，请将 agents 的数据类型转换为 Array 而不是 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/的官方文档

React Material UI自动完成功能不适用于Formik

2 个答案: