отреагировать - изменить выбор показать предыдущее значение - PullRequest
Новая
       19

отреагировать - изменить выбор показать предыдущее значение

0 голосов
/ 11 апреля 2020

Я довольно новичок в React.

У меня есть селектор, который возвращает все, что выбрал пользователь.

Пример кода: 

handleChanged(e){
    const { onSelectcountry } = this.props;
    onSelectcountry(e.target.value)
}
return (
    <div>       
        <Input type="select" name="select" value={Country} onChange={this.handleChanged.bind(this)}>
        { 
            country.map((item) => {
              return (<option value={item._id} key={item._id}> {item.name}</option>);
            })
        }
        </Input>
    </div>
);

i действие отправки зависит от выбора пользователя, 

import { fetchNews} from '../../actions';

    getNews(filterNews) {
        const { fetchNews } = this.props;
        fetchNews(filterNews);
    }
    onSelectcountry(country) {
        this.setState({ Country: country});
        this.getNews({
          this.state,
        })
    }

    <CountrySelector  onSelectcountry={this.onSelectcountry.bind(this)}   Country={Country}/>

Проблема в том, что при изменении выбранного значения отображается значение предыдущего выбора.

1 Ответ

1 голос
/ 11 апреля 2020

это связано с асинхронной природой setState У вас есть несколько вариантов:

  1. используйте дополнительный обратный вызов setState, он будет вызван после обновления состояния. 
    onSelectcountry(country) {
        this.setState(
          { Country: country},
          () => this.getNews({ this.state })
        );
    }
Вызов getNews с составленными вручную аргументами 
    onSelectcountry(country) {
        this.setState({ Country: country });
        this.getNews({
          ...this.state,
          Country: country
        })
    }
Позвоните getNews в componentDidUpdate обратный вызов, например, оставьте onSelectcountry простым и заботитесь только об обновлениях состояния страны, и обрабатывайте обновление реального состояния ожидаемым образом. 

    componentDidUpdate(prevProps, prevState){
      // coundition may vary depending on your requirements
      if (this.state.Country !== prevState.Country) {
        this.getNews(this.state);
      }
    }

    onSelectcountry(country) {
        this.setState({ Country: country});
    }
...