React Router 中的页面更改时更新状态

Question

我有

const Page = React.createClass({
  getInitialState() {
    return { page: {} };
  },
  componentDidMount() {
    const pageId = this.props.params.pageId;
    socket.emit('get page', pageId, (page) => {
      this.setPage(page);
    });
  },
  setPage(page) {
    this.setState({
      page: page
    });
  },
  render() {
    return (
      <div>
        <h2>{this.state.page._id}</h2>
        <p>{this.props.params.pageId}</p>
      </div>
    );
  },
});

但似乎componentDidMount 在我加载页面时有效，但如果我点击其他页面的链接，它不会更新页面。

在render函数中，this.props.params.pageId在我改变页面时更新，但this.state.page._id和我加载页面时一样。

我已经尝试过调试

  componentDidMount() {
    console.log('TEST IF THIS METHOD IS FIRED');

    const pageId = this.props.params.pageId;
    socket.emit('get page', pageId, (page) => {
      this.setPage(page);
    });
  },

但是当我点击其他页面时该功能不会被触发。我也尝试过使用onChange 而不是componentDidMount，但也没有用。

Answer 1

你可以使用 componentDidUpdate(prevProps)

componentDidUpdate(prevProps) {
    if (prevProps.params !== undefined && this.props.params !== undefined) {
        if (prevProps.params.pageId !== this.props.params.pageId) {
            const pageId = this.props.params.pageId;
            socket.emit('get page', pageId, (page) => {
                this.setPage(page);
            });
        }
    }
},