Как сохранить последнее значение в props?

Question

[Brake Made]

Добрый день , у меня есть страница с поиском сотрудников, если пользователь вводит фио, а такого значения нет, то вывожу ошибку.
recordit.co/sL1RRx8jCN ссылка на gif.
вот только какая ситуация, после того как ошибка появилась , удаляю старое значение в input и оно правится в ошибке.
Как можно сохранить последнее значение?
Код условия :

render(){
    const { error, isLoaded, items , searchValue} = this.props;
if (error) {
  return <Center><div><p className={styles.meme}>┬┴┬┴┤( ͡° ͜ʖ├┬┴┬┴ </p>
  <p className={styles.textMeme}>Из-за угла появляется ошибка и говорит: {error.message}</p>
  </div></Center>;
} else if (!isLoaded) {
  return <Center className={styles.LoaderDiv}><Loader type="big" active></Loader></Center>;
} else if (!items.length) {
  return <Center><p className={styles.memeSecond}>٩(๏̯๏)۶</p><p className={styles.textMeme}>По запросу {searchValue} ничего не найдено</p></Center>
}else {

если нужен дополнительно код, пишите , отправлю :)

Comments

[Антон Спирин]

вот только какая ситуация, после того как ошибка появилась , удаляю старое значение в input и оно правится в ошибке.

Попонятней перефразируйте.

[Brake Made]

Антон Спирин, в gif все подробно показано

Answer 1

[Антон Спирин]

Как я понял, у вас контролируемый input. Вам надо разделить в коде searchValue и значение input(назовем его searchInputValue). То есть, по нажатию кнопки Поиск пишите значение searchInputValue в state как searchValue, его и передавайте в компонент с ошибкой. В итоге в input будет использоваться searchInputValue, в ошибке и поисковом запросе searchValue.

Comments

[Brake Made]

Антон Спирин Я понял, спасибо. Примерно так и догадывался:)

[Brake Made]

@rocknon404 Хотел бы уточнить по разделению .не совсем понял, подскажите, вот код :
Компонент с input :

constructor(props) {
        super(props);
        this.state = {
          error: null,
          isLoaded: false,
          items: [],
          searchValue: ''
        };
      }
onSearchChange = (event, searchValue) => {
        this.setState({ searchValue })
    }
render() {
        const { items, error , isLoaded, searchValue } = this.state;
        return (
            <div>
                <div className={styles.input}>
                    <Input leftIcon={<Icon name="search" />}
                        value={this.state.searchValue}
                        width="700px"
                        placeholder="Введите Фамилию и Имя"
                        onChange={this.onSearchChange}
                    /> {' '}
                    <Button use="primary" onClick={this.onSearchClick}>Найти</Button>
                </div>
            </div>
            <div>
                <SearchHub error={error} isLoaded={isLoaded} items={items} searchValue={searchValue}/>
            </div>


        )
    }
}

[Антон Спирин]

Данил Угрик,

class Example extends Component {
  this.state = {
    error: null,
    isLoaded: false,
    items: [],
    searchValue: '',
    searchInputValue: '',
  };

  onSearchChange = (event, searchInputValue) => {
    this.setState({ searchInputValue });
  };
  
  onSearchClick = () => {
    this.setState(prevState => ({
      searchValue: prevState.searchInputValue,
    }), () => this.props.getData(this.state.searchValue));
  };
  
  render() {
    const { 
      items, 
      error,
      isLoaded,
      searchValue
    } = this.state;

    return (
      <div>
        <div className={styles.input}>
          <Input 
            leftIcon={<Icon name="search" />}
            value={this.state.searchInputValue}
            width="700px"
            placeholder="Введите Фамилию и Имя"
            onChange={this.onSearchChange}
          /> 
          {' '}
          <Button use="primary" onClick={this.onSearchClick}>Найти</Button>
        </div>
      </div>
      <div>
        <SearchHub 
          error={error}
          isLoaded={isLoaded}
          items={items}
          searchValue={searchValue}
        />
      </div>
    );
  }
}

На самом деле состояние запроса можно и не хранить, можно для этих целей текст ошибки с сервера возвращать, сохранять как error и показывать.
Вы в error сейчас, что пишите?

[Brake Made]

Антон Спирин, там пишу ошибку, которая ловится на fetch :

onSearchClick = () => {
        const { searchValue } = this.state;
        fetch("http://localhost:8080/api/users/?name="+searchValue)
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.items
          }
        );
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
      .catch(error => console.log('parsing failed', error));

[Brake Made]

Антон Спирин, начал внедрять ваш код , увы, но у меня ошибка :
Что самое интересное , ваш код я ставлю после когда который указал выше в пример на error . Если я его ставлю перед , то ошибки никакой нет , но в месте где должен появится текст ошибки на лендинге , там пусто

[Антон Спирин]

Данил Угрик, =) Смотрите, метод getData это абстрактный пример запроса за данными. У вас же такого нет, вы должны свой там вызывать или определить. Можно сделать так:

fetchData() {
  const { searchValue } = this.state;
  fetch("http://localhost:8080/api/users/?name="+searchValue)
    .then(/* ... */)
    .catch(/* ... */);
}

onSearchClick = () => {
    this.setState(prevState => ({
      searchValue: prevState.searchInputValue,
    }), this.fetchData);
  };

[Brake Made]

Антон Спирин, Аго, новичек еще , не совсем понял :)

[Brake Made]

Антон Спирин, Извините что опять беспокою, на чем в итоге я остановился :

onSearchChange = (event, searchInputValue) => {
      this.setState({ searchInputValue });
    };

    onSearchClick = () => {
      this.setState(prevState => ({
        searchValue: prevState.searchInputValue,
      }), this.onSearchClick);
    };
    
    onSearchClick = () => {
        const { searchInputValue } = this.state;
        fetch("http://localhost:8080/api/users/?name="+searchInputValue)
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.items
          }
        );
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
      .catch(error => console.log('parsing failed', error));
  }
    render() {
        const { items, error , isLoaded, searchValue} = this.state;
        console.log(searchValue);
        return (
            <div>
                <div className={styles.input}>
                    <Input leftIcon={<Icon name="search" />}
                        value={this.state.searchInputValue}
                        width="700px"
                        placeholder="Введите Фамилию и Имя"
                        onChange={this.onSearchChange}
                    /> {' '}
                    <Button use="primary" onClick={this.onSearchClick}>Найти</Button>
                </div>
            </div>
                <SearchHub error={error} isLoaded={isLoaded} items={items} searchValue={searchValue}/>
            </div>


        )
    }
}

Сделал так , поиск идет и все хорошо, но если я ввожу значение которого нет в json , то у меня ничего не происходит, даже текст ошибки не появляется, если быть точнее то в console я вывожу inputResult и там пустое значение. В консоле пустая строка.