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

Question

我在为我的 state.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 未定义。

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

Answer 1

You're using componentWillMount and upto that point you don't have access to window object.

你可以在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 添加 componentWillMount 在不安全列表中，它将在即将发布的版本中弃用。文档建议改用 componentDidMount。

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

Can't set the id to my state from URL using React?

javascript

reactjs

url-parameters