Компонент не будет повторно визуализироваться при изменении состояния, даже если console.log в функции визуализации вызывается - PullRequest
Новая
       43

Компонент не будет повторно визуализироваться при изменении состояния, даже если console.log в функции визуализации вызывается

0 голосов
/ 04 января 2019

Я уверен, что я делаю что-то глупое здесь. Я пытаюсь написать компонент, который, основываясь на состоянии извлечения данных, отображает одну из трех вещей.

1) Сообщение об ошибке, если при выборке произошла ошибка. 2) Сообщение о загрузке, если данные выбираются. 3) Полный дочерний компонент, если данные извлекаются.

То, что происходит сейчас, - это получение успешно, но сообщение Загрузка не исчезнет. В приведенном ниже примере кода вы можете видеть, что я добавил console.log для определения того, должен ли происходить полный рендеринг. Что меня смущает, так это то, что будет в конечном итоге записываться как true, но сообщение о загрузке по-прежнему отображается.

Этот точный шаблон, кажется, работает для одноуровневого компонента в этом приложении, поэтому я не понимаю, чего здесь не хватает ... Вот весь компонент, он был анонимным и лишен стилей, но в остальном структура идентична. 

function mapStateToProps(state) {
    return {
        Data: state.NewDataReducer,
    };
}

const mapDispatchToProps = {
    fetchNewData: ActionCreators.fetchNewData,
};

const DataError = () => (
    <div>
        Error fetching new data!
    </div>
);

const DataLoading = () => (
    <div>
        Loading..
    </div>
);

class MainContainer extends PureComponent {
    static propTypes = {
        choice: PropTypes.string,
        fetchNewData: PropTypes.func,
        Data: ImmutablePropTypes.map.isRequired,
    }

    state = {
        choice: null,
    }

    componentDidUpdate(nextProps) {
        const { choice, fetchNewData, Data } = this.props;

        if(!choice) {
            return;
        }

        if(isFetching(Data)) {
            return;
        }

        const newChoiceSelected = choice !== nextProps.choice;
        if(newChoiceSelected) {
            fetchNewData({choice});
        }
    }

    handleChangeChoice = (choice) => {
        this.setState({
            choice: { choice }
        });
    }

    render() {
        const { choice, Data } = this.props;

        const error = hasFetchError(Data);
        const loading = !error && !isFetched(Data);
        const renderFull = !loading && !error;

        console.log(renderFull);

        if(!renderFull) {
            return (
                <div>
                    Please wait.
                </div>
            );
        }

        const { dataBreakdown } = Data.get("dataKey").toJS();

        return (
            <div>
                <ChildComponent
                  choice={choice}
                  dataBreakdown={dataBreakdown}
                  onSetDrillDown={this.handleChangeChoice}
                />
            </div>
        );
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(MainContainer);

1 Ответ

0 голосов
/ 04 января 2019

Вам необходимо передать функции карты аргументы того, что ей нужно отобразить из неизменяемых типов данных. Map создает новый массив и создает функцию обратного вызова для элементов, через которые он проходит в этом массиве. Это всего лишь пример

Data: ImmutabaleProptypes.map((ing, index)=>( <li key={index}>{Data}</li> // you can write jsx in here. ));

...