仅在 API 请求完成后渲染组件 React hooks

Question

当我的图表组件由于其初始状态（在 API 响应之前是一个空数组）而呈现时出现错误。它会说类似Cannot read property '0' of undefined 的内容，这是因为当组件加载时，它的初始状态是……一个空数组。所以我想知道是否有办法让组件仅在收到 API 响应后才呈现。

这里是父组件：

function InformationPage({
    match: {
        params: { symbol },
    },
}) {

    const [chartData, setChartData] = useState([]); {/*Declaring state*/}

useEffect(() => {  {/*Fetching API response here to set state*/}
    axios
        .get(
            `https://finnhub.io/api/v1/stock/candle?symbol=${symbol}&resolution=15&from=1572651390&to=1602623478&token=xxxxxxxxx`
        )
        .then((res) => {
            console.log(res.data);
            setChartData(res.data);
        })
        .catch((err) => {
            console.log(err);
        });
}, [symbol]);

return (
    
        <Grid item container xs={12} sm={12} md={6} lg={8}>
            {chartData && <QuoteChart chartData={chartData} iex={iex} />}
        </Grid>
    
   );
}
export Default InformationPage;

这是子图表组件，基本上，当我从 axios 执行 fetch 请求时，它会返回一个数组，该数组将映射到 chartRender 对象中。我只需要在来自 axios 的 api 请求完成后才能找到一种方法来呈现组件，以免出现错误。任何帮助将不胜感激。

function QuoteChart(props) {
    const classes = useStyles();
    const { chartData } = props;

    const chartRender = chartData.map((chartConfig) => ({
        x: new Date(chartConfig?.t),
        y: [chartConfig?.o, chartConfig?.h, chartConfig?.l, chartConfig?.c],
    }));

    // const chartDataLog = console.log(chartData);
    const config = {
        series: [
            {
                data: [{ chartRender }],
            },
        ],

Answer 1

更新：根据Finnhub API，它是您从 API 收到的对象，不是数组。这意味着我之前的答案中的charData.length 永远不会被评估为true 并且子组件QuoteChart 永远不会被渲染。

我建议进行以下更改。在您的父组件中，最初创建 charData = null：

const [chartData, setChartData] = useState(null);

当 API 返回响应并为 chartData 分配了一个值时，您的子组件可以呈现：

{chartData && <QuoteChart chartData={chartData} iex={iex} />}

您要在子组件中呈现的图表需要以下输入：[{ x: date, y: [O,H,L,C] }]。因为map() 只能在数组上调用而chartData 不是一个，所以您应该导航到所述对象内的数组之一，例如chartData.t:

const chartRender = chartData.t.map((timestamp, index) => ({
    x: new Date(timestamp),
    y: [chartData.o[index], chartData.h[index], chartData.l[index], chartData.c[index]],
}));

最后，series.data 需要一个数组，您不需要另外将它包装在一个对象中。所以这应该有效：

const config = {
    series: [{
        data: chartRender
    }]
};

---

您使用空数组初始化chartData，因此您的条件应如下所示：

{chartData.length && <QuoteChart chartData={chartData} iex={iex} />}

如果您希望 API 返回一个空列表，我建议将 undefined 或 null 设置为 chartData 的初始值：

const [chartData, setChartData] = useState(null);

在这种情况下，您可以保持现状。

Answer 2

最简单的方法是对您的代码进行简单的小改动：

 {chartData.length && <QuoteChart chartData={chartData} iex={iex} />}

在研究了 finnhub 之后，我发现响应不是一个数组。 我测试了这个网址：

https://finnhub.io/api/v1/stock/candle?symbol=AAPL&resolution=15&from=1572651390&to=1602623478&token=

响应是一个具有“c”属性的对象。 您的代码应相应修改。 对于上面的链接示例：

setChartData(res.data.c);

Answer 3

您需要将您的 axios 调用包装在一个异步函数中，并在那里 wait

useEffect(() => {  {/*Fetching API response here to set state*/}
    
   const getInfo = async () => {
       await res = axios
        .get(
            `https://finnhub.io/api/v1/stock/candle?symbol=${symbol}&resolution=15&from=1572651390&to=1602623478&token=xxxxxxxxx`
        )
        console.log(res.data);
        setChartData(res.data);
   }

   getInfo()
}, [symbol]);

Answer 4

如果我没记错的话，您可以简单地使用 async/await 来解决您的问题。所以将 useEffect 行改为

useEffect(async () => {  {/*Fetching API response here to set state*/}

然后

 await axios
    .get(
        `https://finnhub.io/api/v1/stock/candle?symbol=${symbol}&resolution=15&from=1572651390&to=1602623478&token=xxxxxxxxx`
    )

那么你的应用应该等待 axios 完成获取