reactjs - 检测 React 中的 URL 参数更改

Question

React 没有检测到 url 中的最后一个参数何时更改。如果我重新加载它的工作页面。

我正在使用 "react-router-dom": "^5.0.1"

“路由器”

<Router>
    <PrivateRoute path="/users/:id" exact strict component={User}/>
</Router>

那么。在 User 组件中，我有一个用户列表和所选用户的详细信息

class User extends Component {

    constructor(props) {
        super(props);

        this.state = {
            userId: null,
            users: [{id: '1', name: 'john'}, {id: '2', name: 'mary'}]
        }
    }

    componentDidMount() {
        const { id } = this.props.match.params;
        this.setState({'userId': id})
    }

    render() {
        return (
            <div>
                <div className="users">
                    {this.state.users.map((user, index) => {
                        return (<Link to={`users/${user.id}`}  key={index}>{user.name}</Link>)      
                    })}
                </div>
                <pre className="details">{this.state.userId}</pre>          

            </div>
        )
    }

}

export default User;

当我选择不同的用户时，网址会发生变化，但 this.state.userid 保持不变

更新:

我用

解决了

componentWillReceiveProps(nextProps) {
    const { id } = nextProps.match.params;
    this.setState({'userId': id}
}

但我收到了这个警告。

Warning: componentWillReceiveProps has been renamed, and is not recommended for use.

React Hooks 还是死？

Answer 1

ComponentDidMount 被调用一次(当组件挂载时)，因此如果您更改路由无关紧要，生命周期将不会再次调用。

为了实现您想要的效果，我建议您使用另一个生命周期，例如 (ComponentDidUpdate 或 getDerivedStateFromProps) 或开始使用 Hook ，在您的情况下为 useEffect .或者简单的话，直接在render方法中使用prop。

更新:

这应该可以解决问题:

  componentDidUpdate(prevProps) {
    if (this.state.userId !== this.props.match.params.id) {
      this.setState({ userId: this.props.match.params.id });
    }
  }

componentDidUpdate componentDidUpdate仍然可以安全使用，并在更新发生后立即调用。