javascript - Material UI Autocomplete 组件未显示来自 react 状态的值

Question

我正在尝试从 materialUI 的自动完成组件的状态中获取值(value)。

我面临以下问题: -

自动完成可以很好地选择值，并且使用 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});
    }

选择一个值后，以下值保存在状态:

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)}
感谢大家的宝贵支持和解决方案!