Javascript 通过react路由器重新加载相同路由后的API调用

我正在通过react路由器dom v4的重定向重新加载组件， 当组件第一次加载时，api调用在ComponentDidMount中发生。但当重定向触发组件重新加载时，此方法不会运行

我有一个组件TopicList，它是使用react router dom中的Route通过路径/主题显示的

PostTopic是在TopicList中呈现的模式。在PostTopic内部，我向状态添加了一个名为redirect的属性，并使用该属性将重定向组件呈现为=“/topic”，在将一些数据发布到api后，我将重定向

在topicList中，通过重定向重新加载时，componentDidMount（）未运行，因此不会发生获取新发布数据的api调用

在通过react路由器的重定向重新加载同一路由后，从api调用重新提取数据的最佳方法是什么

class PostTopic extends Component


state = {
  redirect: false
}

handleSubmit = (e) => {
  e.preventDefault();
  const { body, subject } = this.state;
  api.postTopic(this.props.store.token,subject,body)
  .then( response => {
     this.setState({redirect:true})
   })
   .catch( error => {
      this.setState({error});
   });
}

renderRedirect = () => {
  if(this.state.redirect){
    return <Redirect to={this.props.currentPath}/>
  }
}

render(){
  return(
     ...
     ...
     ...
     {this.renderRedirect()}                
  }
}

类PostTopic扩展组件
状态={
重定向：false
}
handleSubmit=（e）=>{
e、 预防默认值（）；
const{body，subject}=this.state；
postTopic（this.props.store.token、subject、body）
。然后（响应=>{
this.setState（{redirect:true}）
})
.catch（错误=>{
this.setState（{error}）；
});
}
RenderDirect=（）=>{
if（this.state.redirect）{
返回
}
}
render（）{
返回(
...
...
...
{this.renderDirect（）}
}
}

componentDidMount

仅在组件最初装入DOM时运行，并且当URL参数更改时，不会装入新组件

您需要使用

componentdiddupdate

，检查URL参数是否已更改，如果已更改，请重新获取数据

示例

function getData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(Array.from({ length: 3 }, () => Math.random()));
    }, 1000);
  });
}

class Page extends React.Component {
  state = { data: [] };

  componentDidMount() {
    getData().then(data => {
      this.setState({ data });
    });
  }

  componentDidUpdate(prevProps) {
    if (prevProps.match.params.pathParam !== this.props.match.params.pathParam) {
      getData().then(data => {
        this.setState({ data });
      });
    }
  }

  render() {
    return (
      <div>
        {this.state.data.map(element => <div key={element}>{element}</div>)}
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Link to="foo"> Foo </Link>
          <Link to="bar"> Bar </Link>
          <Switch>
            <Route path="/:pathParam" component={Page} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

函数getData（）{ 返回新承诺（解决=>{ 设置超时（（）=>{ 解析（Array.from（{length:3}，（）=>Math.random（））； }, 1000); }); } 类页扩展了React.Component{ 状态={data:[]}； componentDidMount（）{ getData（）。然后（数据=>{ this.setState（{data}）； }); } componentDidUpdate（prevProps）{ if（prevProps.match.params.pathParam！==this.props.match.params.pathParam）{ getData（）。然后（数据=>{ this.setState（{data}）； }); } } render（）{ 返回( {this.state.data.map（元素=>{element}} ); } } 类应用程序扩展了React.Component{ render（）{ 返回( 福 酒吧 ); } }