将道具传递给反应中的孩子的孩子（2级下）答案

【问题标题】：Passing props to children of children in react (2 levels down)将道具传递给反应中的孩子的孩子（2级下）
【发布时间】：2021-01-27 18:55:34
【问题描述】：

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

附件 1.1 这里是父组件 InformationPage，它渲染了一个名为 QuoteCard. 的子组件我们正在使用反应挂钩来定义和更新 trends 状态。我们正在使用 axios 获取一个 API 请求，该请求将存储在 trends 状态中，该状态将被向下传递给 QuoteCard 组件（向下一级）。

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 传递道具。现在，我想从InformationPage 传递trends prop --> 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;

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

【问题讨论】：

不是您问题的答案，但是，请查看 context api，它是专为像您这样的用例而设计的。

标签： javascript reactjs axios components react-props

【解决方案1】：

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

【讨论】：