Material UI 自动完成组件不显示反应状态的值

Question

我正在尝试从 MaterialUI 的自动完成组件的状态中获取价值。

我面临以下问题：-

自动完成可以很好地选择值，并且使用 onChange 函数也可以将其保存到状态中。但是当我刷新页面/重新渲染时，它没有在 textfeild 上显示值（来自保存的状态）：

<Autocomplete
    name={"TideLocation"}
    disabled={p.disabled}
    options={data_source}
    getOptionLabel={option => option.text}
    inputValue={this.state.tidelocation_searchtext}
    onChange={_this.handleUpdateTideLocationField}
    onNewRequest={_this.handleChangeTideLocation}
    onBlur={_this.handleBlurTideLocationField}
    onUpdateInput={_this.handleUpdateTideLocationField}
      renderInput={(params) => (
       <TextField className="autoCompleteTxt"{...params} label="Location" />
    )}
/>

我尝试使用调试器，发现它获取了值，this.state.tidelocation_searchtext 但未能使用参数设置它。

提前致谢 ！！Ps：我尝试使用 defaultValue 和搜索文本，但没有任何效果

以下是我的 ONchangeFunction

  handleUpdateTideLocationField = (str, value) => {
        debugger
        this.setState({tidelocation_searchtext: value.text});
    }

选择一个值后，以下值保存在 sate 中：

tidelocation_searchtext: "Auckland"

Answer 1

所以我通过研究和多次尝试找到了解决方案，以下是我的问题的解决方案：

<Autocomplete
  name={"TideLocation"}
  disabled={p.disabled}
  options={data_source.map(option=>option.text)} 
  defaultValue={this.state.tidelocation_searchtext}
  onChange={_this.handleUpdateTideLocationField}
  onNewRequest={_this.handleChangeTideLocation}
  onBlur={_this.handleBlurTideLocationField}
  onUpdateInput={_this.handleUpdateTideLocationField}
  renderInput={(params) => (
  <TextField className="autoCompleteTxt"{...params} label="Location" />
 )}
/>

基本上我做错了以下事情：

1.无需使用输入inputValue={this.state.tidelocation_searchtext}& getOptionLabel={option => option.text}

2.由于我的数据是对象形式，我必须将其转换为字符串，以便默认值可以与状态值相匹配 options={data_source.map(option=>option.text)}

感谢大家的宝贵支持和解决方案！！