Компонент автозаполнения пользовательского интерфейса не отображает значения из состояния реакции

Question

Я пытаюсь получить значение из состояния для компонента автозаполнения materialUI.

Я столкнулся со следующей проблемой: -

Автозавершение работает нормально для выбора значения и с помощью функции onChange сохраняет его это в состояние тоже. Но когда я обновляю sh мою страницу / повторный рендеринг, она не показывает значение в текстовом файле (из сохраненного состояния):

<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

Если данные / состояние не сохранены извне fe в локальном хранилище, то они будут потеряны при ссылке на страницу sh, всегда . Это нормально - как память RAM без питания - она ​​(состояние страницы / приложения) существует только в памяти !!

Это все равно, что использовать cook ie, чтобы держать вас в системе.

Если вы действительно нужна такая функциональность, тогда используйте fe redux-persist

Answer 2

Таким образом, я нашел решение самостоятельно, выполнив исследование и несколько попыток, вот решение моей проблемы:

<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)}

Спасибо всем за вашу ценную поддержку и решение !!