我如何在 JSX 中用数组表达变量？

Question

我是ReactJs的初学者。我正在尝试表达来自 firebase 的数据。

当我输入 {quizes[0].quiz} 时，这是有效的。但是，如果我想使用 'qno' 变量，我应该怎么做？

import {useParams} from "react-router-dom";
import {dbService} from 'fbase';

const QuizPlay = () => {
    const {cateId} = useParams();
    const [qno, setQno] = useState(0);
    const [quizes, setQuizes] = useState([]);

useEffect(() => {
            dbService
            .collection("quizes")
            .where('cateId','==',cateId)
            .orderBy("createdAt", "desc")
            .onSnapshot((snapshot) => {
                const quizArray = snapshot.docs.map((doc) => ({
                    id: doc.id,
                    ...doc.data(),
                }));
                setQuizes(quizArray);
            })
        }, [cateId]);

return (
        <div className="container">
            {quizes[qno].quiz} <=== error
        </div>
 )

}

export default QuizPlay;

Answer 1

我认为这是因为第一次安装组件时尚未加载测验。所以测验是空的。试试这个：

{quizes && quizes[qno].quiz}

或

{quizes.length > 0 && quizes[qno].quiz}

你能告诉我们你遇到了什么错误吗？

Answer 2

在 quizes 被填充之前 quizes[qno] - (quizes[0]) - 是 undefined 因此没有 quiz 属性 .

尝试

<div className="container">
    {quizes[qno]?.quiz}
</div>

假设您的编译器支持可选链接，否则：

<div className="container">
    {quizes.length > 0 && quizes[qno].quiz}
</div>

我如何在 JSX 中用数组表达变量？

How can I express variables with array in JSX?

firebase

reactjs