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

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

Вот мой код.

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
            })
        })
    }

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


reactjs javascript state setstate
person ACompleteNoobSmoke    schedule 27.03.2020    source источник
comment
Если вы измените console.log(this.user) в componentDidMount() на console.log(this.state.user), будут ли данные записываться?   -  person khan    schedule 27.03.2020
comment
Я пробовал это, и он все еще равен нулю.   -  person ACompleteNoobSmoke    schedule 27.03.2020

Ответы (1)


arrow_upward
0
arrow_downward

Я не уверен, что это правильный синтаксис для метода класса 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
            })
        })
    }
person sdotson    schedule 27.03.2020
comment
Кажется, я вижу проблему! Я обновил свой ответ. Вы вызывали функцию, которая затем вызывает функцию Promise. Ты не возвращался и ничего не ждал. Дайте мне знать, если у вас все еще есть проблемы. - person sdotson; 27.03.2020
comment
До сих пор нет кости. Также я ценю вашу помощь до сих пор человек, большое спасибо. - person ACompleteNoobSmoke; 27.03.2020
comment
Сегодня утром заметил еще кое-что. Когда вы устанавливаете состояние, эти значения будут на this.state. Так что user var в вашем console.log должно быть this.state.user. - person sdotson; 27.03.2020
comment
И, возможно, сделайте свою console.log проверку в своей render функции. Я предполагаю, что именно здесь вы, вероятно, будете использовать это значение. - person sdotson; 27.03.2020
comment
Все еще не работает и возвращает только значение null/undefined. Это начинает сильно раздражать. - person ACompleteNoobSmoke; 28.03.2020