Question

这部分属于博客之类的东西，反应从api获取数据：

Page.js：

async componentDidMount() {
    let alias = this.props.match.params.name;
    const result = await API.getPage(alias);
    if(result.status === 200){
        document.title = 'Page - ' + result.data.title;
        this.setState({
            title: result.data.title,
            body: result.data.body
        })
    }
}

这是路由器：

<Route exact path='/Page/:name' component={Page}></Route>

例如，当您打开网站（主页）并单击页脚中的此链接时：

<li><Link to="/Page/HowItWorks">How It Works</Link></li>

它可以正常工作并打开此内容，但是当我进入此页面/Page/..并单击另一个页脚链接时，它不会更新，只是更改了网址，但是如果刷新页面，它将获得正确的内容。

我错过了什么？

Answer 1

您可以将异步代码分解为实用程序函数，该函数可以由任一生命周期函数调用。在componentDidMount中，您可以随意调用它。在componentDidUpdate中，您应该将上一个渲染周期的match值与当前周期的值进行比较。

async fetchPage() {
  const alias = this.props.match.params.name;
  const result = await API.getPage(alias);
  if (result.ok) {
    document.title = 'Page - ' + result.data.title;
    this.setState({
      title: result.data.title,
      body: result.data.body
    })
  }
}

componentDidMount() {
  fetchPage();
}

componentDidUpdate(prevProps) {
  const { name } = this.props.match;
  const { name: prevName} = prevProps.match;

  if (prevName !== name) {
    fetchPage();
  }
}

ReactJS内容未更新

1 个答案: