Question

我通过从组件到组件的追溯发现了这个问题。

我有一个 Quiz 组件，它是一个父组件，它将存储 3 个子组件，包括我的 Clock 组件。

起初，我以为我的时钟组件有问题，所以我在那个组件上花了几天时间来计算它的间隔函数。

但我后来注意到它总是先渲染 undefined，我仍然尝试在 Clock 组件中修复它，然后我记得我将 time 作为道具传递从 Quiz 开始，我将它追溯到 Quiz 组件，在这里我发现每次 Quiz 组件第一次渲染时，它都会得到 undefined 和然后在第二次渲染时，它会显示我想要的正确数据，这就是我的 Clock 组件不起作用的原因。

那么有什么办法可以让 Quiz 组件首次呈现数据？因为我必须先使用 Axios 获取它然后填充空数组状态。我想要的是将它立即作为道具传递给 Clock 以便我可以使用一些时间格式（但由于它一开始未定义，它会立即显示错误）。

它总是第一次渲染 undefined。

这是我的代码，它很短很简单，请帮我解释一下，我遇到过很多次这种情况，但我通常不介意，因为在遇到这种情况之前，其他一切都在工作。谢谢。

import React, { useState, useEffect } from "react";
import Clock from "../Clock/clock.js";
import QuizForm from "../QuizForm/quiz-form.js";
import RankList from "../RankList/ranklist.js";
import axios from "axios";

export default function Quiz(props) {
    const [dataTopic, setDataTopic] = useState([]);
    const quizID = Number(props.match.params.topicId);

    useEffect(
        () =>
            axios.get("http://localhost:3000/quiz-topics/" + quizID).then((res) => {
                setDataTopic(res.data);
            }),
        [quizID]
    );

    return (
        <div className="row">
            <Clock time={dataTopic.quiztime} />
            <QuizForm quizID={quizID} />
            <RankList quizID={quizID} />
        </div>
    );
}

Answer 1

您的默认初始状态 dataTopic 设置为空数组，因此第一次渲染将始终使用空数组完成。因此，当您将 {dataTopic.quiztime} 传递给 Clock 组件时，它仅提供 undefined。

如果您不想使用空数组进行任何类型的渲染，则向时钟组件添加短路条件，这样它就不会在没有任何数据的情况下渲染该组件。

{dataTopic.quizTime && <Clock time={dataTopic.quiztime} />}

Answer 2

您可以使用条件渲染。

import React, { useState, useEffect } from "react";
import Clock from "../Clock/clock.js";
import QuizForm from "../QuizForm/quiz-form.js";
import RankList from "../RankList/ranklist.js";
import axios from "axios";

export default function Quiz(props) {
    const [dataTopic, setDataTopic] = useState([]);
    const quizID = Number(props.match.params.topicId);

    useEffect(
        () =>
            axios.get("http://localhost:3000/quiz-topics/" + quizID).then((res) => {
                setDataTopic(res.data);
            }),
        [quizID]
    );

    return (
        <div className="row">
           {dataTopic.length && <Clock time={dataTopic.quiztime} />}
            <QuizForm quizID={quizID} />
            <RankList quizID={quizID} />
        </div>
    );
}

Answer 3

你能分享你的时钟组件代码吗？看完之后就更清楚了。

另外，如果我是你，我也会尝试使用 async-await！

如何在第一次渲染时停止渲染 undefined？

3 个答案: