React Material UI 没有将 initialValue 绑定到 AutoComplete

Question

我有一个名为form.js 的组件。组件有两种状态，更新状态和创建状态。我有AutoComplete 组件。它在创建状态下工作正常。 （数据创建工作正常）

但是当我尝试使用与更新组件相同的组件时。 customerId 正确设置为组件状态。但不会在AutoComplete 字段中显示相关的客户名称。

const agents = [
  { name: "Pathum", id: 1 },
  { name: "Chamod", id: 2 },
  { name: "Avishka", id: 3 }
];

<FormControl style={{width:'100%'}}>
                          <Autocomplete
                            id="combo-box-demo"
                            options={agents}
                            getOptionLabel={(option) => option.name}
                            style={{ width: '100%' }}
                            onChange={(e, v) => {
                              if (v) {
                                setFieldValue("customerId", v.id);
                              } else {
                                setFieldValue("customerId", "");
                              }
                            }}
                            renderInput={(params) => {
                              return (
                                <TextF
                                  {...params}
                                  label="Combo box"
                                  variant="outlined"
                                />
                              );
                            }}
                          />
                        </FormControl>

我将此代理数组传递给自动完成组件。选择了 customerId 3。所以理想情况下，我希望在 AutoComplete 组件中看到名称 Avishka，而不是它是空的。

希望大家都清楚我的问题。 这是完整代码https://codesandbox.io/s/material-demo-forked-z8kjq?file=/demo.js:1842-1949

Answer 1

由于您的 Autocomplete 不受控制且主要用于您的表单，因此只需分配一个 defaultValue

<Autocomplete
  defaultValue={agents[2]}
/>

或者，您可以切换到受控组件。价值将基于 Formik values

<Autocomplete
  value={agents.find((agent) => agent.id === values.customerId)}
/>