ReChart не рендеринг, если прохождение рано вернуться к ожиданиям обещаний? - PullRequest
Новая
       69

ReChart не рендеринг, если прохождение рано вернуться к ожиданиям обещаний?

0 голосов
/ 08 января 2020

У меня странная проблема с ReChart, который не отображает линии данных или ось X, но загружает ось Y без меток. 

componentDidMount() {
    equipmentService.getOne(this.param)
        .then((item) => {
            this.setState({ item: item[0] });

            offerService.getChartMonth(this.param)
                .then((data) => {
                    this.setState({ chartOffers: data });
                })
                .catch((error) => {
                    return console.error(error);
                }); 
        })
        .catch((error) => {
            return console.error(error);
        });
}

render() {
    const item = this.state.item;

    if(item.length < 1 || this.state.chartOffers.length < 1) return (<LoadingPage />);

    return (
        <div>
            <Row>
                <Col>
                    <Chart data={this.state.chartOffers} />
                </Col>
            </Row>
        </div>
    );
}

Если удалить эту строку: 

if(item.length < 1 || this.state.chartOffers.length < 1) return (<LoadingPage />);

... тогда все отлично работает. Но я хочу подождать, пока мои обещания закончатся sh, прежде чем я его покажу.

В моем компоненте Chart у меня есть это: 

shouldComponentUpdate(nextProps, nextState) {
    if(this.props.data !== nextProps.data) {
        const groupByDay = _.groupBy(nextProps.data, (date) => {
            return moment.unix(date.createdAt).startOf("day").format();
        });

        const result = _.map(groupByDay, (group, day) => {
            return {
                date: day.split("T")[0],
                avgPrice: group.reduce((avg, offer) => Math.trunc(avg + offer.price / group.length), 0)
            }
        });

        this.setState({ data: result.reverse() })
    }

    return true;
}

render() {
    if(this.state.data.length < 1) return (<LoadingPage />);

    const tickFormatter = (value) => abbreviateNumber(value);
    return (
        <LineChart
            type="monotone"
            width={600}
            height={200}
            data={this.state.data}
        >
            <YAxis dataKey="avgPrice" stroke="#d8d8d8" tickFormatter={tickFormatter} />
            <XAxis dataKey="date" stroke="#d8d8d8" />
            <Tooltip content={this.customTooltip} position={{ x: "auto", y: 0 }} />
            <Line type="monotone" dataKey="avgPrice" stroke="#1967be" yAxisId={0} strokeWidth={2} />
        </LineChart>
    );
}

Странная вещь, даже вне оператор if, если я, например, поместил console.log внутри него, ничего не произойдет . То же самое касается componentDidMount и c. Их никогда не вызывают.

Это также означает, что состояние data в моем компоненте Chart всегда пустое и не может отображать линии.

Что происходит?

...