Javascript 无法使用React从URL将id设置为我的状态？

我在将正确的ID设置为我的状态时遇到问题。当组件第一次出现时，我试图在componentWillMount方法中影响idea的值，但我得到一个错误

class Contrat extends Component {
    state = {
        idContrat: 4000003,
    };

    componentWillMount() {
        const urlString = window.location.href;
        const url = new URL(urlString);
        const contratId = url.searchParams.get("contratId");
        if (contratId !== null && contratId.length !== 0) {
             this.props.getDetailsContrat(contratId);
        }
        this.setState({idContrat: contratId});
    }
    render(){
        return <div>{this.state.idContrat}</div>;
    }
}

然后我试了一下：

class Contrat extends Component {
    state = {
        idContrat: new URL(window.location.href).searchParams.get("contratId");,
    };

    componentWillMount() {
        const urlString = window.location.href;
        const url = new URL(urlString);
        const contratId = url.searchParams.get("contratId");
        if (contratId !== null && contratId.length !== 0) {
             this.props.getDetailsContrat(contratId);
        }
    }
    render(){
        return <div>{this.state.idContrat}</div>;
    }
}

但是我再次得到一个错误，告诉我没有定义中的URL

有没有合适的方法来完成这样的任务？任何帮助都将不胜感激

你正在使用，直到那一点你还没有 访问窗口对象

您可以在componentDidMount中执行此操作

componentDidMount(){
        const urlString = window.location.href;
        const url = new URL(urlString);
        const contratId = url.searchParams.get("contratId");
        if (contratId !== null && contratId.length !== 0) {
             this.props.getDetailsContrat(contratId);
        }
    }

旁注：-React添加的组件将装载在不安全列表中。在即将发布的版本中，它将被弃用。Doc建议改用componentDidMount