为什么我的用户界面在我遇到某个问题后没有加载？

在我遇到某个问题后没有加载？"/>

为什么我的用户界面在我遇到某个问题后没有加载？

所以我在这里要做的是使用 URL 呈现问题。但问题是当我遇到某个问题时，比如

Question 5

所以例如这是我的网址

http://127.0.0.1:5173/part1survey/5

这里发生的只是负载，然后问题有时会显示，有时不会显示

const {id} = useParams()
const navigate = useNavigate()
const location = useLocation()
const getSurveyPart = location.pathname.split('/')[1].split('part')[1].split('survey')[0]
        
const {error, dispatch, user } = useContext(AuthContext);
const currentCategory = user.user_category
const currentNumber = user.user_number
            
const initialState = {
user_number: currentNumber,
user_category: currentCategory,
choice: []
};
const [answer,setAnswer] = useState(initialState)


const [allQuestionPerModule, setAllQuestionPerModule] = useState([])
const [currentQuestionNumber, setCurrentQuestionNumber] = useState(id);
const [currentQuestion ,setCurrentQuestion] = useState()
const [currentChoices, setCurrentChoices] = useState([])

const [progress, setProgress] = useState(100)
const [loading,setLoading] = useState(true)



    useEffect(() =>{

        const getCurrentQuestion = async () =>{
            setLoading(true);
            try {
                //current Question
                const res = await publicRequest.get(`/${currentCategory}/${currentCategory}${getSurveyPart}/questiontype/${id}`)
                setCurrentQuestionType(res.data.type)
                setCurrentQuestion(res.data)
    
                //Total Questions
                const totalQuestion = await publicRequest.get(`/${currentCategory}/${currentCategory}${getSurveyPart}/`)
                setAllQuestionPerModule(totalQuestion.data)
    
                //Current Choices
                const currentChoice = await publicRequest.get(`${currentCategory}/listOfChoices?name=${res.data.question}&part=${currentCategory}questionpart${getSurveyPart}`)
                console.log(currentChoice)
                let column = 1;


               
                if(currentChoice.data.length < 6 ){
                    column = 12
                }else if(currentChoice.data.length < 11){
                    column = 4;
                }else if( currentCategory.data.length > 10){
                    column = 3
                }

                setGridQuestion(column)
                setCurrentChoices(currentChoice.data)
    
                //Progress Section
                const getTotalQuestion = totalQuestion.data.length
                const currentQuestionData = totalQuestion.data[id - 1]
                const currentQuestionNumber = currentQuestionData.question_order
                setCurrentQuestionNumber(currentQuestionNumber)
    
                const progressPercentage = (currentQuestionNumber / getTotalQuestion) * 100
                setProgress(progressPercentage)
    
                setLoading(false)
            } catch (error) {
                setLoading(false)
            }
        }
        
        getCurrentQuestion()
    },[setCurrentQuestionNumber, id, setAllQuestionPerModule,setCurrentChoices, 

setCurrentQuestion, setProgress])

所以这是我的useEffect，所以这里的逻辑是，我会得到总的问题并把它做成一个进度条，然后我会根据URL的ID来渲染

currentQuestion

所以当我点击下一步按钮时。

const handleNextQuestion = async (e) =>{
                e.preventDefault()
                console.log(answer)
                if(currentQuestionNumber < allQuestionPerModule.length){
                    navigate(`/part1survey/${currentQuestionNumber + 1}`);
                }
                setAnswer(initialState)

            }

这里会发生的是 URL 会递增，所以从这里开始

http://127.0.0.1:5173/part1survey/5进入http://127.0.0.1:5173/part1survey/6**

我递增ID。

这就是我渲染 UI 的方式

{ loading ? (
<Box>
<CircularProgress />
</Box>
) : (
<>
<Typography>Question #{currentQuestion?.question_order}</Typography>
<Typography>{currentQuestion?.question}</Typography>
<Grid container spacing={2}>
{currentChoices.map((choice, index) => (
<Grid item xs={getGridQuestion} key={index} >
    {getCurrentQuestionType  === 'Single' ? (
          <Button>
          <input type="radio" name="choice" hidden value= 
    {choice.question_choices} />
          {choice.question_choices}
        </Button>
    
    ):(
        <Button
            component="label"
          
        >
            <input
                type="checkbox"
                name="choice"
                hidden
                value={choice.question_choices}
            />
            {choice.question_choices}
        </Button>

    )}

</Grid>
))}
</Grid>
</>
)}