Есть ли способ сделать объект доступным во всей области действия вact.js?

Question

Есть ли способ создать объект и использовать его во всем классе в реакции. Не в состоянии, потому что теперь у меня есть проблема, мне нужно инициализировать класс объекта (cookie), и мне нужно проверить его из метода извлечения. Другими словами, как создать объект и передать его в состояние или сделать его пригодным для использования во всем классе. Я знаю, что мне не хватает некоторых основ, но я публикую вопрос после того, как прочитал учебники, статьи, вопросы, и я не нашел способа добиться этого извините, если вопросы кажутся очень простыми. Я предоставлю код, чтобы показать вам, что я пытаюсь сделать. Кстати, если кто-то может показать мне некоторые ресурсы для чтения, потому что я вхожу в эту проблему не в первый раз, и я что-то упускаю, например, задачу, которую я хочу достичь в Java, легко, вы объявляете переменную в начале кода и ее сделанный. Заранее благодарю за любую помощь.

import Cookies from 'universal-cookie';

class Home extends React.Component {


    constructor(props) {
        super(props);
        const { cookies } = new Cookies();             <-- I want to pass this object into state.
        this.state = {
            veichles: [],
            filteredItems: [],
            user: {},
            query: '',
            password: '',
            welcome: '',
            welcomeMsg: '',
            token: '',
        };

    }

    handleChange = e => {
        this.setState({query: e.target.value})
    }

    handlePassword = e => {
        this.setState({password: e.target.value})
    }

    onSubmit = e => {
        e.preventDefault();
        fetch(  `myresource/customer/auth/${this.state.query}/${this.state.password}`,
            {
                method: "POST",
                headers: {
                    credentials: "same-origin"
                },
                credentials: "include",
            })
            .then(res => res.json())
            .then((result) => {
                    this.setState({
                        user: result,
                        password: result                         <-- state
                    });
                    cookies.set('token', result, { path: '/' }); <-- i want to use it here or in the state above
                }
            )

        this.setState( { welcomeMsg: 'Hello, ' } );
    }

    render() {
        const { filteredItems } = this.state;
        return (
            <Container>
                <Row>
                    <Col sm={12} >
                        <form className={style.form1}>
                             <input  content="Username" type="text" onChange={this.handleChange} />
                             <input type="password"  onChange={this.handlePassword} />
                             <button className={style.button}  onClick={this.onSubmit}>Login</button>
                        </form>
                    </Col>
                </Row>
                <Row>
                    <Col sm={12}> <Jumbotron {...this.state} /> </Col>
                </Row>
            </Container>
        );
    }
}


export default Home

Answer 1

Do this.cookies = cookies внутри конструктора.Тогда вы сможете получить доступ к this.cookies везде, где есть правильный контекст класса this.В вашем случае вы можете использовать его там, где вы пытаетесь получить доступ в данный момент.