material ui v4 中自动完成的默认值

Question

我正在使用 Material UI v4.

我有一个组件可以获取所有用户并在下拉列表中显示它们，但我无法 select 默认值。我尝试了以下沙箱，但它对我不起作用：[https://codesandbox.io/s/material-demo-4mhcj?file=/demo.js][CodeSandBox]

前- test@gmail.com

反应挂钩形式：^7.20.5

我尝试为 Controller 和 Autocomplete 都提供默认值，但这是第一次不起作用。

知道我做错了什么吗？

// data is something like 
// [{name: 'ABCDE', email: 'ABCDEEE@gmail.com'}, {name: 'eeeeee', email: 'eeeeee12@gmail.com'}]

const UserSelection = ({ data = [], onChangeHandler }) => {
  const { control } = useForm({});
  const selectedUserEmail = "ABCDEEE@gmail.com";

  return (
    <>
        <Controller
          name="combo-box-demo"
          control={control}
          defaultValue={data.find(item => item.email === selectedUserEmail)}
          render={()  =>
            <Autocomplete
              id="combo-box-demo"
              size="small"
              options={data}
              defaultValue={data.find(item => item.email === selectedUserEmail)}
              onChange={onChangeHandler}
              getOptionLabel={option => option.name }
              renderOption={option => option.name}
              renderInput={(params) => (
                <TextField
                  {...params}
                  variant="outlined"
                  placeholder="Select"
                />
              )}
            />
          }
        />
    </>
  );
};

export default UserSelection;

Answer 1

我找到了答案，所以我在这里发帖：

问题是传入的数据是异步的，自动完成无法正确呈现它。

目前我正在使用：

const UserSelection = ({ data = [], onChangeHandler }) => {
  const selectedUser = {name: 'ABCDE', email: 'ABCDEEE@gmail.com'};

  return (
    <Autocomplete
    id="combo-box-demo"
    options={data}
    defaultValue={selectedUser}
    onInputChange={onChangeHandler}
    getOptionLabel={option => option.name }
    renderOption={option => option.name}
    renderInput={(params) => (
       <TextField
        {...params}
         variant="outlined"
         placeholder="Select"
       />
    )}
  />
  );
};
export default UserSelection;

在我使用上述组件的任何地方，我都使用 like

data ? <UserSelection/> : null

此外，我没有使用 onChange，而是使用了 onInputChange，这有助于获取默认值

然后它可以工作并加载默认用户，希望对社区有所帮助

material ui v4 中自动完成的默认值

Default value in Autocomplete in material ui v4

reactjs

autocomplete

material-ui

react-hook-form