Material UI Autocomplete 组件未显示来自反应状态的值答案

【问题标题】：Material UI Autocomplete component not showing values from react stateMaterial UI Autocomplete 组件未显示来自反应状态的值
【发布时间】：2020-01-28 10:58:56
【问题描述】：

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

我面临以下问题：-

Autocomplte 可以很好地选择值，并且使用 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"

【问题讨论】：

How to create a Minimal, Reproducible Example，我们无法猜测状态值是什么以及您如何渲染组件
好的，我会添加更多信息

标签： javascript reactjs material-ui

【解决方案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)}

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

【讨论】：

【解决方案2】：

如果数据/状态没有保存在外部 f.e.在本地存储中，那么它会在页面刷新时丢失，总是。这很正常 - 就像没有电源的 RAM 内存 - 它（页面/应用程序状态）只存在于内存中！

这就像使用 cookie 来保持您的登录状态。

如果您真的需要这样的功能，请使用 f.e. redux-persist

【讨论】：

我已经在使用 redux 进行状态管理，在调试器的帮助下，我可以看到状态及其值正在正确呈现。只是无法传递给 autocomplte > textfeild > params
setState 使用本地组件状态，没有 redux - 显示这部分
我正在处理 docker 值正在保存到数据库中
给出关于问题的零信息 - 搜索输入中的每个kestroke都进入DB？！输入用于查询数据库，但输入的值不会保存/存储在组件状态之外的任何地方（总是在页面刷新时丢失） - 如果它必须在浏览器页面刷新后幸存，那么它必须持久存储
如果你使用 redux，那么使用 mapToStateProps 和 this.props.someSearchText 作为 inputValue - 使用 dispatch（和 reducer）来更改存储中的值，prop 将被更新

【解决方案3】：

你是对的，如果对象类型选项被传递，material-ui 的AutoComplete 组件在挂载时似乎没有反映value。（也许是一个错误？）

我可以通过将正确的字符传递给 inputValue 来解决这个问题。

@RebelCoder

也许你应该初始化tidelocation_searchtext。

【讨论】：