Парсинг данных из бэкенда django в компонент react

Здравствуйте, я пытаюсь парсить JSON данные из представления Django во фронтенд. В основном в моем представлении я определил данные, которые я хочу разобрать, и они выглядят следующим образом :

user_information = {'username':request.user.username,
                        'email':request.user.email,
                        'first_name':request.user.username}

Затем в html я могу разобрать его на javascript, используя json_script, который выглядит следующим образом:

{{ user_information|json_script:'user_information' }}

Затем я хочу вызвать переменную user_information в компоненте React, используя этот сценарий:

class Form extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            user_information: null
        };
    }
    
    componentDidMount() {
        this.setState({
            user_information: JSON.parse(document.getElementById('user_information').textContent)
        });
        console.log(this.state.user_information);
    }

    render () {
        return(
            <h1>{this.state.user_information}</h1>
        );
    }
}

Для проверки этого я попытался вывести его в консоль, чтобы посмотреть, успешно ли он разобран до состояния компонента. Но оказалось, что в консоли я получил null. Не могли бы вы мне помочь, в чем моя ошибка и как мне ее решить?

Вернуться на верх