Состояние JS неожиданно обновляется - PullRequest
Новая
       14

Состояние JS неожиданно обновляется

0 голосов
/ 15 мая 2019

Я очень новичок в JS.

Вот страница, над которой я работаю: 

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import Plot from 'react-plotly.js';
import { fetchPosts, createPost } from '../actions/postActions'

import GroupedBarChart from '../containers/GroupedBarChart'

class Usage extends Component {
    state = {
        title: '',
        resp_data: [],
    }

    componentDidMount() {
        this.props.fetchPosts('/en/api/usage/')
    }

    componentWillReceiveProps (nextProps) {
        if (nextProps.posts.data) {
            this.setState({resp_data: nextProps.posts.data}, function () {
                console.log(this.state.resp_data);
            });
        }
        console.log(this.state.resp_data)
    }

    render() {
        const { title, resp_data } = this.state

        return (<div>
            <GroupedBarChart
                title={ title }
                data={ resp_data }
            />
        </div>);
    }
}

const mapStateToProps = state => ({
    posts: state.posts.items,
    newPost: state.posts.item
})

export default connect(mapStateToProps, { fetchPosts, createPost })(Usage)

Проблема в том, что в какой-то момент состояние неожиданно меняется.

Так что в componentWillReceiveProps сразу после вызова setState есть console.log, и вывод этого console.log - именно то, что я ожидаю. Однако, если я распечатываю состояние сразу после оператора if: 

if (nextProps.posts.data) {
    this.setState({resp_data: nextProps.posts.data}, function () {
        console.log(this.state.resp_data);
    });
}

this.state.resp_data - пустой массив.

Вывод двух console.logs выглядит следующим образом: 

[] # this is outside if
(2) [{…}, {…}] # this is inside if

Может кто-нибудь объяснить мне, почему это происходит и как я могу это преодолеть?

Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 15 мая 2019

Сначала избавьтесь от метода componentWillReceiveProps, так как его больше не рекомендуется использовать, и он будет удален в версии 17. Вы можете проверить здесь для получения дополнительной информации.

Вторая проверка реагирует на жизненные циклы , поэтому вы увидите, что ваш компонент будет отображаться с начальными данными на этапе монтажа, поэтому я предполагаю, что у вас нет posts.data вначале, и вы получите его в componentDidMount. Поэтому после получения данных вы запускаете setState, который вызывает другой рендеринг (проверьте фазу обновления жизненного цикла, вы увидите setState причиной рендеринга).

Вы звоните console.log после вызова setState и ожидаете увидеть некоторые данные, но если вы посмотрите на документацию , вы увидите, что это не гарантия.

setState () не всегда сразу обновляет компонент. Это может Пакет или отложить обновление до позже. Это делает чтение this.state сразу после вызова setState () потенциальная ловушка.

0 голосов
/ 15 мая 2019

Почему-то, когда я изменил ответ в серверной части - data = [] на data = {}, он сработал.Я все еще не понимаю, почему это так.

...