проходящий топор ios ответ на дочерний компонент в реакции - PullRequest
Новая
       16

проходящий топор ios ответ на дочерний компонент в реакции

0 голосов
/ 03 мая 2020

Я занимаюсь разработкой приложения для поиска в реальном времени. у меня есть 3 компонента. Search, SearchBar и SearchResults. при каждом изменении ввода внутри SearchBar будет выполняться обработчик события. эта функция передается из поиска в панель поиска. поэтому при каждом изменении родительский компонент отправляет запрос на сервер и получает данные. затем родительский элемент передает их своему дочернему элементу, SearchResults и SearchResults отображают их. но проблема в том, что дочерний компонент всегда на один шаг, например,

, я набрал sam. Поиск отправил Сэм на сервер и получил ответ. затем передал их в SearchResults. но теперь он выводит ответ о "sa" вместо "sam", если я набираю другой символ s, у нас есть sams в строке поиска, но SearchResults отображает извлеченные данные о "sam". 

class Search extends Component {
constructor() {
    super();
    this.http = new Http();
    this.state = {phrase: ''};
    this.searchRes = null;
}

componentDidUpdate() {
    console.log('Search updated')
}

handleChange = async e => {
    await this.setState({
        phrase: e.target.value
    });
    console.log('state: '+this.state.phrase);
    this.sendPhrase();
};

sendPhrase() {
    return this.http.post('v1/search', {'phrase': this.state.phrase})
        .then(response =>
            this.searchRes = <SearchResults searchRes={response.data}/>
        );
}

render() {
    return (
        <>
            <Col xs={12}>
                <SearchBar handleChange={this.handleChange} phrase={this.state.phrase}/>
            </Col>
            <Col xs={12}>
                {this.searchRes}
            </Col>
        </>
    );
}
}

i заранее благодарю за внимание:)

1 Ответ

1 голос
/ 03 мая 2020

Если вы хотите, чтобы компонент перерисовывался, вам нужно установить состояние. Строка, подобная этой, , а не вызывает повторную визуализацию компонента: 

this.searchRes = <SearchResults searchRes={response.data}/>

Единственный раз, когда вы устанавливаете состояние, это когда происходит изменение, и в это время this.searchRes устанавливается в все, что вы установили в последний раз, когда поиск закончился. Так что вы всегда будете рендерить его в этот последний раз.

Исправление - перевести результаты в состояние: 

constructor(props) {
  super(props);
  this.http = new Http();
  this.state = {
    phrase: '',
    results: null
  };
}

//...

sendPhrase() {
    return this.http.post('v1/search', {'phrase': this.state.phrase})
        .then(response => 
            this.setState({ results: response.data })
        );
}

render() {
    return (
        <>
            <Col xs={12}>
                <SearchBar handleChange={this.handleChange} phrase={this.state.phrase}/>
            </Col>
            <Col xs={12}>
                {this.state.results && (
                    <SearchResults searchRes={this.state.results}/>
                )}
            </Col>
        </>
    );
}
...