Reactjs React axios get返回空数组

正如我提到的，console.log只打印空数组。我认为这个问题与异步问题有关

这就是我得到的错误。

因此，我在axios中进行延迟，返回时加载了isLoading，但仍然无法工作

有什么解决办法吗？谢谢你的帮助

js（父组件，这里的每个状态）->MainTest.js->Question.js

import React from "react";
import Styled from "styled-components";

function Question({questionList}) {
    console.log(questionList)
    return (
        <QuestionWrap>
            <i className="far fa-calendar-alt"></i>
            <h3>
            {questionList.question.split('</br>').map(line => {
                        return(<>{line}<br/></>)
                    })}
            </h3>
        </QuestionWrap>
    );
}

export default Question;

const QuestionWrap = Styled.div `
width: 100%;
height: 55%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
 i{
     color: #b56467;
     font-size: 2rem;
     margin-bottom: 2rem;
 }
 h3 {
    text-align: center;
    font-family: "UhBeeBEOJJI";
    color: #3a1a00;
    font-size: 2.7rem;
    line-height: 3.4rem;
 }
`;

Test.js

import React, { useState, useEffect } from "react";
import Tutorial from "../Tutorial";
import MainTest from "../MainTest";
import axios from "axios";

const Test = () => {
    
    const [count, setCount] = useState(0);
    const [questionNum, setQuestionNum] = useState(0);
    const [questionList, setQuestionList] = useState([]);

    useEffect(() => {
        axios.get("http://localhost:3001/get/question").then((response) => {
            setQuestionList(response.data);
        })
    }, []);

    const questionHandler = () => {
        setQuestionNum(questionNum + 1);
        setCount(count + 1);
    };

    return (
        <div>
           
            <MainTest
                questionList={questionList}
                questionNum={questionNum}
                questionHandler={questionHandler}
            />
        </div>
    );
};

export default Test;

import React，{useState，useffect}来自“React”；
从“./Tutorial”导入教程；
从“./MainTest”导入MainTest；
从“axios”导入axios；
常数测试=（）=>{
const[count，setCount]=useState（0）；
const[questionNum，setQuestionNum]=useState（0）；
常量[questionList，setQuestionList]=useState（[]）；
useffect（（）=>{
axios.get（“http://localhost:3001/get/question）然后（（回应）=>{
setQuestionList（response.data）；
})
}, []);
常量questionHandler=（）=>{
setQuestionNum（questionNum+1）；
设置计数（计数+1）；
};
返回(
);
};
导出默认测试；

MainTest.js

import React from 'react'
import styled from 'styled-components'
import ProgBar from './ProgBar'
import Question from './Question'
import SelectSec from './SelectSec'

function MainTest({questionList, questionNum, questionHandler}) {
    return (
        <TestWrap>
            <ProgBar />
            <Question questionList={questionList[questionNum]}/>
            <SelectSec questionList={questionList[questionNum]} questionHandler={questionHandler}/>
        </TestWrap>
    )
}

export default MainTest

const TestWrap = styled.div`
width: 100vh;
height: 100vh;
background-image: url("./images/background/background.png");
`;

从“React”导入React
从“样式化组件”导入样式化
从“./ProgBar”导入ProgBar
从“./问题”导入问题
从“./SelectSec”导入SelectSec
函数MainTest（{questionList，questionNum，questionHandler}）{
返回(
)
}
导出默认主测试
const TestWrap=styled.div`
宽度：100vh；
高度：100vh；
背景图片：url（“./images/background/background.png”）；
`;

问题.js

import React from "react";
import Styled from "styled-components";

function Question({questionList}) {
    console.log(questionList)
    return (
        <QuestionWrap>
            <i className="far fa-calendar-alt"></i>
            <h3>
            {questionList.question.split('</br>').map(line => {
                        return(<>{line}<br/></>)
                    })}
            </h3>
        </QuestionWrap>
    );
}

export default Question;

const QuestionWrap = Styled.div `
width: 100%;
height: 55%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
 i{
     color: #b56467;
     font-size: 2rem;
     margin-bottom: 2rem;
 }
 h3 {
    text-align: center;
    font-family: "UhBeeBEOJJI";
    color: #3a1a00;
    font-size: 2.7rem;
    line-height: 3.4rem;
 }
`;

从“React”导入React；
从“样式化组件”导入样式化；
函数问题（{questionList}）{
console.log（问题列表）
返回(
{questionList.question.split（'
'）.map（行=>{
返回（{line}
）
})}
);
}
出口违约问题；
const QuestionWrap=Styled.div`
宽度：100%；
身高：55%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
我{
颜色：#b56467；
字号：2rem；
边缘底部：2rem；
}
h3{
文本对齐：居中；
字体系列：“UhBeeBEOJJI”；
颜色：#3a1a00；
字体大小：2.7rem；
线高：3.4rem；
}
`;

在问题组件中，您需要在返回中设置一个条件，如：

function Question({questionList}) {
    console.log(questionList)
    return (
        <QuestionWrap>
            <i className="far fa-calendar-alt"></i>
            <h3>
            {questionList & questionList.question && questionList.question.split('</br>').map(line => {
                        return(<>{line}<br/></>)
                    })}
            </h3>
        </QuestionWrap>
    );
}

export default Question;

函数问题（{questionList}）{
console.log（问题列表）
返回(
{questionList&questionList.question&questionList.question.split（'
'）.map（行=>{
返回（{line}
）
})}
);
}
出口违约问题；

这是因为在填写问题列表之前，您的console.log已触发。尝试将此控制台日志包装在useffect中的useffect wit问题列表中dependency@antoineso你好谢谢你的快速回复。我照你说的做了，但还是出错了。。。。hahaI更新了我的答案，我以为问题列表是问题组件中的一个数组