Question

我在reactjs中有一个简单的post组件，该组件根据id从db打印db的post数据，从url中拾取id（我为此使用react router），并通过ajax调用来拾取数据。问题是，当我更改页面时，组件不更新内容，更新仅在刷新页面时发生。

class Post extends Component {

  constructor(props) {
    super();

    this.state = {
      thePost: '',
    };
  }

  componentDidMount(){
axios.get(endpoint.posts+'/getpost/'+this.props.match.params.id, cfg)
            .then(res => {
                this.setState({
                    thePost: res.data.thePost || ''
                });
        })      
  }

  render () {
    return (
        <div>POST { this.props.match.params.id } - { JSON.stringify(this.state.thePost, null, 0) }</div>
    )
  }
}

export default Post;

现在的问题是，并非在每次页面更改时都调用componentDidMount，如何强制重新安装？还是我需要在组件的其他生命周期部分移动ajax调用？

我发现了一些类似的问题，但是太老了，只能尊重实际的reactjs和react路由器版本。

Answer 1

这样做。如果当前URL与先前的URL不匹配，请再次检查componentDidUpdate中的URL更改，再次发出API请求。

  componentDidMount(){
    this.getPosts()
  }

  getPosts = () => {
    axios.get(endpoint.posts+'/getpost/'+this.props.match.params.id, cfg)
      .then(res => {
        this.setState({
            thePost: res.data.thePost || ''
        });
    })
  }

  componentDidUpdate(prevProps) {
    if (this.props.match.params.id !== prevProps.match.params.id) {
      this.getPosts()
    }
  }

更换路由器后重新安装

1 个答案: