在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);
            });
        }
    }
},