reactjs - 如何根据返回对象的唯一标识轻松设置下拉列表中的选定值？

Question

我正在从我的端点将对象绑定到我的自动完成下拉菜单。如何根据返回对象的唯一标识轻松设置下拉列表中的选定值？

代码示例显示了我的自动完成设置。FKTitleValue 是外键 ref 的 id。选项有对象 {id: 'idValue', display:'displayValue'}。我想将 FKTitleValue 与选项 id 进行比较以选择自动完成值。

      <Autocomplete
            id="FkTitle"
            classes={{
              option: classes.option,
            }}
            options={props.dropDownData.fkTitleDropdownData ?? []}
            getOptionLabel={(option) => option.display}
            loading={!props.dropDownData.fkTitleDropdownData}
            value={FkTitleValue ?? null}
            onChange={FkTitleOnChange}
            renderInput={(params) => (
              <TextField
                {...params}
                InputProps={{
                  ...params.InputProps,
                  autoComplete: 'new-password',
                  endAdornment: (
                    <React.Fragment>
                      {!props.dropDownData.fkTitleDropdownData ? (
                        <CircularProgress color="inherit" size={20} />
                      ) : null}
                      {params.InputProps.endAdornment}
                    </React.Fragment>
                  ),
                }}
                label="FkTitle"
                variant="outlined"
                margin="normal"
              />
            )}
          />

标签： reactjsmaterial-ui