如何将获取的数据映射到卡片组件

Question

我正在构建一个测验应用程序并使用一些 API 来获取数据，发出 GET 请求后我得到的响应是这样的

[
    {
        "id": 910,
        "question": "What used to be called a minion in Kubernetes cluster?",
        "description": null,
        "answers": {
            "answer_a": "A component of the master node.",
            "answer_b": "A monitoring engine used widely in Kubernetes.",
            "answer_c": "Docker container service.",
            "answer_d": "A worker node.",
            "answer_e": null,
            "answer_f": null
        },
        "multiple_correct_answers": "false",
        "correct_answers": {
            "answer_a_correct": "false",
            "answer_b_correct": "false",
            "answer_c_correct": "false",
            "answer_d_correct": "true",
            "answer_e_correct": "false",
            "answer_f_correct": "false"
        },
        "correct_answer": null,
        "explanation": null,
        "tip": null,
        "tags": [
            {
                "name": "Kubernetes"
            }
        ],
        "category": "DevOps",
        "difficulty": "Medium"
    },
    {
        "id": 1019,
        "question": "Is Kubernetes open-source?",
        "description": null,
        "answers": {
            "answer_a": "True",
            "answer_b": "False",
            "answer_c": null,
            "answer_d": null,
            "answer_e": null,
            "answer_f": null
        },
        "multiple_correct_answers": "false",
        "correct_answers": {
            "answer_a_correct": "true",
            "answer_b_correct": "false",
            "answer_c_correct": "false",
            "answer_d_correct": "false",
            "answer_e_correct": "false",
            "answer_f_correct": "false"
        },
        "correct_answer": null,
        "explanation": null,
        "tip": null,
        "tags": [
            {
                "name": "Kubernetes"
            }
        ],
        "category": "DevOps",
        "difficulty": "Easy"
    },
    {
        "id": 1010,
        "question": "While starting minikube, a configuration file, gets created by default inside what directory on Linux?",
        "description": null,
        "answers": {
            "answer_a": "/tmp",
            "answer_b": "/home/user/.kube",
            "answer_c": "/root",
            "answer_d": "/home/user",
            "answer_e": null,
            "answer_f": null
        },
        "multiple_correct_answers": "false",
        "correct_answers": {
            "answer_a_correct": "false",
            "answer_b_correct": "true",
            "answer_c_correct": "false",
            "answer_d_correct": "false",
            "answer_e_correct": "false",
            "answer_f_correct": "false"
        },
        "correct_answer": null,
        "explanation": null,
        "tip": null,
        "tags": [
            {
                "name": "Kubernetes"
            }
        ],
        "category": "DevOps",
        "difficulty": "Medium"
    },
    {
        "id": 962,
        "question": "Which of the following are true for a pod in Kubernetes?",
        "description": null,
        "answers": {
            "answer_a": "A Pod represents processes running on your Cluster",
            "answer_b": "Pods are the simplest units in the Kubernetes object model that you create or deploy",
            "answer_c": "A pod is the same as a container",
            "answer_d": "You can have only 1 container running in 1 pod",
            "answer_e": null,
            "answer_f": null
        },
        "multiple_correct_answers": "true",
        "correct_answers": {
            "answer_a_correct": "true",
            "answer_b_correct": "true",
            "answer_c_correct": "false",
            "answer_d_correct": "false",
            "answer_e_correct": "false",
            "answer_f_correct": "false"
        },
        "correct_answer": null,
        "explanation": null,
        "tip": null,
        "tags": [
            {
                "name": "Kubernetes"
            }
        ],
        "category": "DevOps",
        "difficulty": "Medium"
    },
    {
        "id": 1018,
        "question": "Which Process Validates And Configures Data For The Api Objects Like Pods, Services?",
        "description": null,
        "answers": {
            "answer_a": "kube-apiserver process validates and configures data for the api objects.",
            "answer_b": "kube-apiserver process validates and configures data for the gui objects.",
            "answer_c": "kube-apiserver process validates and configures data for the cli objects.",
            "answer_d": null,
            "answer_e": null,
            "answer_f": null
        },
        "multiple_correct_answers": "false",
        "correct_answers": {
            "answer_a_correct": "true",
            "answer_b_correct": "false",
            "answer_c_correct": "false",
            "answer_d_correct": "false",
            "answer_e_correct": "false",
            "answer_f_correct": "false"
        },
        "correct_answer": null,
        "explanation": null,
        "tip": null,
        "tags": [
            {
                "name": "Kubernetes"
            }
        ],
        "category": "DevOps",
        "difficulty": "Easy"
    },
    {
        "id": 966,
        "question": "What is the purpose of a ReplicaSet?",
        "description": null,
        "answers": {
            "answer_a": "To prevent clones from invading other clusters",
            "answer_b": "To monitor and respond to environmental latency",
            "answer_c": "To maintain a stable set of replica Pods running at any given time",
            "answer_d": "To create and maintain volumes",
            "answer_e": null,
            "answer_f": null
        },
        "multiple_correct_answers": "false",
        "correct_answers": {
            "answer_a_correct": "false",
            "answer_b_correct": "false",
            "answer_c_correct": "true",
            "answer_d_correct": "false",
            "answer_e_correct": "false",
            "answer_f_correct": "false"
        },
        "correct_answer": null,
        "explanation": null,
        "tip": null,
        "tags": [
            {
                "name": "Kubernetes"
            }
        ],
        "category": "DevOps",
        "difficulty": "Easy"
    },
    {
        "id": 1052,
        "question": "What does 'become: yes' mean in Ansible playbooks?",
        "description": null,
        "answers": {
            "answer_a": "It means that the command must be retried until it succeeds",
            "answer_b": "It means that the service needs to be started once installed",
            "answer_c": "It means that the worker node should become a manager node",
            "answer_d": "It means that we would run all commands as root",
            "answer_e": null,
            "answer_f": null
        },
        "multiple_correct_answers": "false",
        "correct_answers": {
            "answer_a_correct": "false",
            "answer_b_correct": "false",
            "answer_c_correct": "false",
            "answer_d_correct": "true",
            "answer_e_correct": "false",
            "answer_f_correct": "false"
        },
        "correct_answer": "answer_a",
        "explanation": null,
        "tip": null,
        "tags": [
            {
                "name": "DevOps"
            }
        ],
        "category": "DevOps",
        "difficulty": "Easy"
    },
    {
        "id": 1017,
        "question": "What Is The Use Of Kube-controller-manager?",
        "description": null,
        "answers": {
            "answer_a": "kube-controller-manager embeds the core control loop which is a non-terminating loop that regulates the state of the system.",
            "answer_b": "kube-controller-manager embeds the core control loop which is a terminating loop that regulates the state of the system.",
            "answer_c": null,
            "answer_d": null,
            "answer_e": null,
            "answer_f": null
        },
        "multiple_correct_answers": "false",
        "correct_answers": {
            "answer_a_correct": "true",
            "answer_b_correct": "false",
            "answer_c_correct": "false",
            "answer_d_correct": "false",
            "answer_e_correct": "false",
            "answer_f_correct": "false"
        },
        "correct_answer": null,
        "explanation": null,
        "tip": null,
        "tags": [
            {
                "name": "Kubernetes"
            }
        ],
        "category": "DevOps",
        "difficulty": "Medium"
    },
    {
        "id": 922,
        "question": "What is the role of kube-apiserver and kube-scheduler?",
        "description": null,
        "answers": {
            "answer_a": "The kube – apiserver follows the scale-out architecture and, is the front-end of the master node control panel.",
            "answer_b": "The kube – apiserver follows the scale-out architecture and, is the back-end of the master node control panel.",
            "answer_c": null,
            "answer_d": null,
            "answer_e": null,
            "answer_f": null
        },
        "multiple_correct_answers": "false",
        "correct_answers": {
            "answer_a_correct": "true",
            "answer_b_correct": "false",
            "answer_c_correct": "false",
            "answer_d_correct": "false",
            "answer_e_correct": "false",
            "answer_f_correct": "false"
        },
        "correct_answer": null,
        "explanation": null,
        "tip": null,
        "tags": [
            {
                "name": "Kubernetes"
            }
        ],
        "category": "DevOps",
        "difficulty": "Medium"
    },
    {
        "id": 923,
        "question": "What is ETCD?",
        "description": null,
        "answers": {
            "answer_a": "Etcd is written in Go programming language and is a distributed key-value store used for coordinating between distributed work.",
            "answer_b": "Etcd is written in Python programming language and is a distributed key-value store used for coordinating between distributed work.",
            "answer_c": "Etcd is written in C++ programming language and is a distributed key-value store used for coordinating between distributed work.",
            "answer_d": null,
            "answer_e": null,
            "answer_f": null
        },
        "multiple_correct_answers": "false",
        "correct_answers": {
            "answer_a_correct": "true",
            "answer_b_correct": "false",
            "answer_c_correct": "false",
            "answer_d_correct": "false",
            "answer_e_correct": "false",
            "answer_f_correct": "false"
        },
        "correct_answer": null,
        "explanation": null,
        "tip": null,
        "tags": [
            {
                "name": "Kubernetes"
            }
        ],
        "category": "DevOps",
        "difficulty": "Easy"
    }
]

当我尝试用response.data 记录它时效果很好，但是当我尝试用console.log(ques[0]) 记录我的第一个元素的问题时它不起作用。这是我的代码：

const [ques, setQues] = useState([]);
    const loadedQues = [];

    
    const fetch = async() => {
        const response = await axios.get(`https://quizapi.io/api/v1/questions?
        apiKey=${process.env.REACT_APP_QUIZ_API_KEY}
        &limit=10
        &category=DevOps`
        )
        let rawData = response.data;
        rawData.map((item)=>{loadedQues.push(item)});
    }
    useEffect(()=>{ 
        try{
            fetch();
            setQues(loadedQues);    
            console.log(ques[0]);
        }
        catch(error){
            console.log(error);
        }
    }, []);

Answer 1

在设置ques 状态值之前，在useEffect 钩子中调用fetch 函数。并且 **fetch 是一个 async 函数，当调用 setQues 以使用 loadedQues 的值更新状态时，它们的结果可能不可用，当setQues 被调用。

当数据可用时，您应该更新fetch 以更新qest 状态

const [ques, setQues] = useState([]);

const fetchData = async () => {
    const response = await axios.get(//);
    
    /*
    No need to loop over the response.data as It's an array of data it can be set as value of ques state
    */
    setQues(response.data);
}

useEffect(() => {
    fetchData();
}, [])

您可以在fetchData 函数内调用setQues 直接更新状态。

无需定义const loadedQues = []，因为API调用的值直接传递给状态设置器

fetch是一个javascript关键字Fetch API

所以你必须避免使用 javascript 关键字作为变量名。

只要 API 调用的数据可用，它就会触发 ques 状态的更新，顺便会触发组件重新渲染