setState не определяет переменную состояния (ReactJS) - PullRequest
Новая
       7

setState не определяет переменную состояния (ReactJS)

0 голосов
/ 27 марта 2020

Я нуб из ReactJS, и я создал домашнюю страницу для просмотра пользователями после входа в систему или регистрации. Я получаю данные из своего пользовательского API (NodeJS), но как только я получаю данные и пытаюсь установить setState, оказывается, что он не обновляет переменные состояния.

Вот мой код. 

export class SideMenu extends Component {

constructor(props) {

        super(props)

        this.state = {
            user: {},

        };
    }


    componentDidMount() {
        this.fetchData();
        console.log(this.user);
    }

    fetchData = () => {
        axios.get("http://localhost:3001/returningusers").then((response) => {
            const data = response.data.User[0]
            console.log(data)

            this.setState({
                user: data
            })
        })
    }

Мне действительно нужна помощь, это замедлило мой импульс, и я не знаю, как это исправить. Спасибо.

1 Ответ

0 голосов
/ 27 марта 2020

Я не уверен, что это правильный синтаксис для метода класса ES6. Как насчет того, чтобы попробовать приведенное ниже вместо функции стрелки: 

fetchData() {
        axios.get("http://localhost:3001/returningusers").then((response) => {
            const data = response.data.User[0]
            console.log(data)

            this.setState({
                user: data
            })
        })
    }

Также вам нужно вернуть Обещания и либо await, либо then их. Например: 

async componentDidMount() {
        await this.fetchData(); // you need to wait until this finishes
        console.log(this.state.user);
    }
    // and you need to return the Promise here
    fetchData() => {
        return axios.get("http://localhost:3001/returningusers").then((response) => {
            const data = response.data.User[0]
            console.log(data)

            this.setState({
                user: data
            })
        })
    }
...