Как обновить состояние после history.pu sh () с помощью withRouter?

Question

Я собираюсь установить setState после перехода на другой путь с помощью WithRouter. Я ожидал, что следующий код 1) перенаправляет на указанный путь и 2) обновляет состояние, однако он выполняет только 1). Что не так с моими кодами?

Что я собираюсь сделать с этим методом, это изменить текущее состояние страниц, которые выделяют цвет меню. Это происходит, когда выбрана страница в меню или активирована функция ссылки на странице.

Class App extends .. {
  constructor(props) {
    super(props);
    this.state = {
      state: null
    };
  }
  handleState = index => e => {
    this.setState({ state: index });
  };
 render() {
  return (
    <Switch>
      <Route path="/SampleA">
        <SampleA handleState={this.handleState}>
      </Route>
      <Route path="/SampleB">
        <SampleB>
      </Route>
    </Switch>
  );
 }
}

Const SampleA = props => {
  const handlClick = () => {
    props.handleState(0);
    props.history.push({
      pathname: `/SampleB`
    });
  }
  return(
    <Button onClick={handleClick}>Go to B!</Button>
  );
}

Answer 1

Это может быть проблемой:

handleState = index => e => {
    this.setState({ state: index });
  };

должно быть

handleState = index => {
    this.setState({ state: index });
};

, поскольку ранее handleState - это функция, которая принимает индекс в качестве аргумента и возвращает другую функцию, которая ожидает другую Аргумент e.

Теперь он просто берет индекс и обновляет состояние.

update

Вот как должна выглядеть ваша функция:

Const SampleA = props => {
  const handlClick = (e) => {
    props.handleState(e, 0);
    props.history.push({
      pathname: `/SampleB`
    });
  }
  return(
    <Button onClick={handleClick}>Go to B!</Button>
  );
}

Теперь событие и индекс передаются в функцию handleState, поэтому вы можете использовать их как:

handleState = (event, index) => {
  console.log(event, index);
  this.setState({ state: index });
};