Question

我想将状态作为道具从父组件传递到子组件，该子组件包含另一个将利用道具的子组件。这是附件的代码库附件。

附件1.1这是父组件InformationPage，它呈现一个名为QuoteCard.的子组件。我们正在使用react挂钩来定义和更新trends状态。我们正在使用axios来获取将以trends状态存储的API请求，该请求将被向下传递到QuoteCard组件（向下1级）。

function InformationPage({
    match: {
        params: { symbol },
    },
}) {
    
    const [trends, setTrends] = useState([]);

    useEffect(() => {
        axios
            .get(
                `https://finnhub.io/api/v1/stock/recommendation?symbol=${symbol}&token=XXXXXXXXXXXX`
            )
            .then((res) => {
                console.log(res.data);
                setTrends(res.data);
            })
            .catch((err) => {
                console.log(err);
            });
    }, [symbol]);

    return (
        <Grid container direction='row' spacing={3} alignItems='center'>
            <Grid item xs={12} md={6} lg={4}>
                <QuoteCard trends={trends} />
            </Grid>
        </Grid>
    );
}
export default InformationPage;

附件1.2这是QuoteCard组件，用于从父InformationPage组件传递道具。现在，我想通过trends-> InformationPage-> QuoteCard

的ApexChart道具

function QuoteCard(props) {
return (
            <Grid item>
                <ApexChart trends={props?.trends} />
            </Grid>
);
}

export default QuoteCard;

附件1.3这是ApexChart组件的完整代码库。我为上下文放置了完整的代码库。当我通过 props?.trends[0]?.period时，什么都没有显示。我没有收到错误，只是没有显示数据。

import React from 'react';
import Chart from 'react-apexcharts';

class ApexChart extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            series: [
                {
                    name: 'PRODUCT A',
                    data: [44, 55, 41, 67, 22, 43],
                },
                {
                    name: 'PRODUCT B',
                    data: [13, 23, 20, 8, 13, 27],
                },
                {
                    name: 'PRODUCT C',
                    data: [11, 17, 15, 15, 21, 14],
                },
                {
                    name: 'PRODUCT D',
                    data: [21, 7, 25, 13, 22, 8],
                },
            ],
            options: {
                chart: {
                    type: 'bar',
                    height: 350,
                    stacked: true,
                    toolbar: {
                        show: true,
                    },
                    zoom: {
                        enabled: true,
                    },
                },
                responsive: [
                    {
                        breakpoint: 480,
                        options: {
                            legend: {
                                position: 'bottom',
                                offsetX: -10,
                                offsetY: 0,
                            },
                        },
                    },
                ],
                plotOptions: {
                    bar: {
                        horizontal: false,
                    },
                },
                yaxis: {
                    labels: {
                        show: true,
                        style: {
                            colors: 'rgba(255, 255, 255, 0.7)',
                        },
                    },
                },
                xaxis: {
                    type: 'datetime',
                    categories: [
                        props?.trends[0]?.period,
                        '01/02/2011 GMT',
                        '01/03/2011 GMT',
                        '01/04/2011 GMT',
                        '01/05/2011 GMT',
                        '01/06/2011 GMT',
                    ],
                    labels: {
                        show: true,
                        style: {
                            colors: 'rgba(255, 255, 255, 0.7)',
                        },
                    },
                },
                legend: {
                    position: 'right',
                    offsetY: 40,
                },
                fill: {
                    opacity: 0.8,
                },
            },
        };
    }

    render() {
        return (
            <div id='chart'>
                <Chart
                    options={this.state.options}
                    series={this.state.series}
                    type='bar'
                    height={350}
                />
            </div>
        );
    }
}
export default ApexChart;

任何帮助将不胜感激。谢谢！

Answer 1

在您的InformationPage组件中，尝试将<QuoteCard trends={trends} /> 更改为<QuoteCard trends={this.state.trends} />

将道具传递给有反应的儿童（降低2级）

1 个答案: