通过反应路由器重新加载相同路由后的API调用答案

【问题标题】：API call after reloading same route via react router通过反应路由器重新加载相同路由后的API调用
【发布时间】：2019-01-15 23:28:10
【问题描述】：

我正在通过 Redirect 从 react-router-dom v4 重新加载一个组件，当组件第一次加载时，api 调用发生在 ComponentDidMount 中。但是当 Redirect 触发组件重新加载时，此方法不会运行。

我有组件 TopicList ，它使用来自 react-router-dom 的 Route 由路径 /topic 显示

PostTopic 是一个在 TopicList 中呈现的 Modal。在 PostTopic 内部，我向状态添加了一个名为 redirect 的属性，并使用它来渲染一个 Redirect Component to="/topic"，我在将一些数据发布到 api 后重定向。

在 topicList 通过 Redirect 重新加载时，componentDidMount() 未运行，因此不会发生 api 调用来获取新发布的数据。

在通过 Redirect 从 react-router 重新加载相同的路由之后，从 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()}                
  }
}

【问题讨论】：

标签： javascript reactjs react-router-v4

【解决方案1】：

componentDidMount 只会在组件最初安装在 DOM 中时运行，并且当 URL 参数更改时不会安装新组件。

您需要使用 componentDidUpdate 并检查 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>
    );
  }
}

【讨论】：