Блог

Главная - Вопросы по программированию - Я потерял реквизит после перезагрузки страницы в react

Я потерял реквизит после перезагрузки страницы в react

#javascript #reactjs #reload #prop

Вопрос:

Я использовал 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». Это массив, но во второй раз его невозможно найти.

Комментарии:

1. Вы можете использовать history.push() для добавления pid в URL-адрес и перемещения функции getQuestionnaire внутри компонента singleQuestionnaire и получения pid из URL-адреса с помощью useLocation

Ответ №1:

потому что вопросы в 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>;
};

Комментарии:

1. в этом компоненте я тоже использую useEffect, и когда я помещаю оператор if и возвращаю что-то, я получаю ошибку «Реагировать» должно быть до возврата, но мне нужен useEffect после этого оператора if

2. @ZahraEsmaili, тогда ты можешь обновить свой код ? потому что я не вижу полезного эффекта в одиночном запросе

Ответ №2:

это происходит из-за вызова асинхронного API. Когда вы выполняете асинхронный вызов, поток не ждет, он движется дальше и начинает выполнять другие действия. Теперь ваш асинхронный вызов может быть завершен, но ваш обратный вызов не будет выполнен до тех пор, пока стек не опустеет, именно так работает JavaScript. Я рекомендую вам использовать какой-нибудь загрузчик или текст

  {questions ? <SingleQuestionnaire questions={questions} setQuestions={setQuestions} /> : <p>Loading...</p>}
Метки: