资料ui v4中自动完成的默认值

Question

我正在使用资料UI v4。

我有一个组件，它接受所有的用户并在下拉列表中显示他们，但是我无法选择默认值。我试着跟随沙箱，但它对我无效: https://codesandbox.io/s/material-demo-4mhcj?file=/demo.js

前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;

无论我在哪里使用上述组件，我都使用如下

data ? <UserSelection/> : null

另外，我没有使用onChange，而是使用onInputChange来帮助获取默认值。

然后运行并加载默认用户，希望它对社区有所帮助。