Question

我遇到一个奇怪的问题，就是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 />);

...那么它工作得很好。但是我要等到诺言兑现后再显示。

在我的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等也是如此。它们从未被调用。

这也意味着我的Chart组件中的data状态始终为空，无法呈现线条。

这是怎么回事？

如果通过提前返回等待承诺，是否无法显示ReChart？

0 个答案: