Question

我打算用WithRouter移到另一个路径后再设置setState。我希望以下代码都可以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是一个将index作为参数并返回另一个需要另一个参数e的函数。

现在，它只获取索引并更新状态。

更新

这应该是您的功能：

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

如何使用withRouter在history.push（）之后更新状态？

1 个答案: