我在反应中重新加载页面后丢失了道具

Question

我在包装组件的useEffect中使用了axios，并将数据作为道具发送到另一个组件“singleQuestionnaire”，在singleQuestionnaire组件中，我对数据进行了解构，在第一次尝试时，它工作正常，但在重新加载页面后它不起作用并出现错误：无法读取未定义的属性“地图”

import React, { useEffect, useState } from "react";
import SingleQuestionnaire from "./SingleQuestionnaire";
import { fetchQuestions } from "../../../api/index";

const Questionnaires = ({ match }) => {
  const [questions, setQuestions] = useState([]);
  const pid = match.params.id;
  const getQuestionnaire = async (pid) => {
    try {
      const { data } = await fetchQuestions(pid);
      console.log(data.data, "action in component");
      setQuestions(data.data);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    getQuestionnaire(pid);
  }, []);
  console.log("all questions", questions);

  return (
    <div>
      <SingleQuestionnaire questions={questions} setQuestions={setQuestions} />
    </div>
  );
};

export default Questionnaires;

这是我的单一问卷组件：

import React, { useEffect, useState } from "react";
const SingleQuestionnaire = ({ questions, setQuestions }) => {
  const [questionnaire, setQuestionnaire] = useState([]);
  console.log(questions);
  const { data } = questions;
  console.log("data", data.farmInformationQuestionnaireData);
  return <div>simple component</div>;
};

export default SingleQuestionnaire;

第一次，在控制台中我可以看到数据“data.data.farmInformationQuestionnaireData”。这是一个数组，但第二次未定义。

Answer 1

这是由于异步 API 调用而发生的。当您进行异步调用时，线程不会等待，它会继续前进并开始执行其他事情。 现在您的异步调用可能已完成，但在堆栈为空之前不会执行您的回调，这就是 javaScript 的工作方式。我建议你使用某种加载器 gif 或文本

 {questions ? <SingleQuestionnaire questions={questions} setQuestions={setQuestions} /> : <p>Loading...</p>}

Answer 2

因为SingleQuestionnaire 中的问题在我们获取之前是一个空数组 这会导致这里出错

  const { data } = questions;

您可以添加加载文本，因为最初 questions 将是一个空数组，然后它将是您的 res.data（假设它是一个对象）

const SingleQuestionnaire = ({ questions, setQuestions }) => {


  const [questionnaire, setQuestionnaire] = useState([]);
  console.log(questions);

  if(questions.length === 0 ) return <h1> Loading</h1>

  const { data } = questions; 
  console.log("data", data.farmInformationQuestionnaireData);
  return <div>simple component</div>;
};