Не можете установить идентификатор моего состояния из URL с помощью React? - PullRequest
Новая
       16

Не можете установить идентификатор моего состояния из URL с помощью React?

1 голос
/ 07 марта 2019

У меня проблема с установкой правильного идентификатора для моего state.id. Когда компонент появляется впервые, я попытался повлиять на значение идеи в методе componentWillMount, но у меня появляется ошибка, 

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 не определен.

Есть ли более надежный способ выполнить такую ​​задачу?любая помощь будет высоко ценится.

1 Ответ

2 голосов
/ 07 марта 2019

Вы используете componentWillMount и до этого момента у вас нет доступ к объекту окна.

Вы можете сделать это в 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);
        }
    }

На стороне Примечание: - Реакция добавлена ​​componentWillMount в список UNSAFE, он будет признан устаревшим в следующих версиях. Док предлагает вместо этого использовать componentDidMount.

...