在React Router中，当页面改变时更新状态

Update state when page changes in React Router

本文关键字：改变 更新 状态 React Router      更新时间：2023-09-26

我有

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，但它也不起作用。

可以使用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);
            });
        }
    }
},
相关文章：