React axios 获取返回空数组答案

【问题标题】：React axios get return empty arrayReact axios 获取返回空数组
【发布时间】：2021-04-09 14:14:52
【问题描述】：

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

这是我得到的错误。

所以，我在 axios 中进行了延迟，使用 isLoading 返回但仍然无法正常工作。

有什么解决办法吗？感谢您的帮助！

Test.js(父组件，这里的每个状态) -> MainTest.js -> Question.js

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;

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");
`;

问题.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;
 }
`;

【问题讨论】：

这是因为你的 console.log 在 questionList 被填满之前就被触发了。尝试将此控制台日志包装在 useEffect 依赖项中带有 questionList 的 useffect 中
@antoineso 嗨。感谢您的快速回复。我照你说的做了，但还是出错了……哈哈
我已经更新了我的答案，我认为 questionList 是 Question 组件中的一个数组

标签： reactjs asynchronous react-hooks

【解决方案1】：

在您的问题组件中，您需要在返回中有一个条件，例如：

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;

【讨论】：