Javascript 子组件无法呈现，因为对于子组件的第一次呈现，上下文API显示为未定义

我试图让一个子组件仅在我设置的上下文API状态完全挂载时呈现。父组件从服务器抓取，并根据接收到的信息设置状态。我在第一次渲染时一直未定义，然后它重新渲染，并以数组的形式出现。我只想渲染这个组件，这样子级可以渲染它的组件而不会出现任何错误。我试图使用UseEffect，但我不太了解它

这是子组件

import React, { useState, useContext, useEffect } from "react";
import styles from "./bathoneform.module.css";
import Ratings from "../Ratings";
import {
  BathOneFormContext,
  FormQuestionsContext,
} from "../../Store";

function BathOneForm() {
  const [formQuestions, setFormQuestions] = useContext(FormQuestionsContext);
  const [bathOneFormAnswers, setBathOneFormAnswers] = useContext(
    BathOneFormContext
  );
  //setting the array
  const array = formQuestions.bathone;
  const handleChange = (e) => {
    const { name, value } = e.target;
    setBathOneFormAnswers((state) => ({ ...state, [name]: value }));
  };
  console.log(formQuestions);
  return (
    <div>
      <form
        className={styles["BathroomOneFormWrapper"]}
        id="bathroom-one-form"
        onChange={handleChange}
      >
        {array.map((object, index) => {
          return (
            <div className={styles["CheckboxWrapper"]} key={index}>
              <h5>{object}</h5>
              <Ratings
                Question={object}
              />
            </div>
          );
        })}
      </form>
    </div>
  );
}

export default BathOneForm;

App.js

import React, { useState } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router- 
dom";
import styles from "./App.module.css";
import DocumentTitle from "react-document-title";
import MoveInForm from "./pages/MoveInForm";
import NoMatch from "./components/NoMatch";
import Store from "./Store";
import axios from "axios";

function App() {
  const [state, setState] = useState(false);

  //Title Case
  String.prototype.toProperCase = function () {
    return this.replace(/\w\S*/g, function (txt) {
      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
  };

  const renderMoveIn = (routerProps) => {
    const Name = routerProps.match.params.apartment.toLowerCase();
    let headers = new Headers();
    headers.append("Content-Type", "application/json");
    headers.append("Accept", "application/json");
    headers.append("Origin", "http://localhost:3000");
    axios
      .get(`http://localhost:5000/api/${Name}`, headers)
      .then((res) => {
        setState(true);
      })
      .catch((error) => {
        console.log(error);
      });
    const Apartment = apartmentName.toProperCase();
    return state ? <MoveInForm Apartment={Apartment} /> : <NoMatch />;
  };
  return (
    <DocumentTitle title="Move-In Inspection">
      <Store>
        <Router>
          <div className={styles["App"]}>
            <Switch>
              <Route
                path="/:apartment"
                render={(routerProps) => renderMoveIn(routerProps)}
              />
              <Route component={NoMatch} />
            </Switch>
          </div>
        </Router>
      </Store>
    </DocumentTitle>
  );
}

export default App;

import React，{useState}来自“React”；
从“react Router-
dom”；
从“/App.module.css”导入样式；
从“反应文档标题”导入文档标题；
从“/pages/MoveInForm”导入MoveInForm；
从“/components/NoMatch”导入NoMatch；
从“/Store”导入存储；
从“axios”导入axios；
函数App（）{
const[state，setState]=使用状态（false）；
//产权案
String.prototype.TopropertCase=函数（）{
返回此。替换（/\w\S*/g，函数（txt）{
返回txt.charAt（0.toUpperCase（）+txt.substr（1.toLowerCase（）；
});
};
const rendermovine=（路由程序）=>{
const Name=routerProps.match.params.partment.toLowerCase（）；
let headers=新的headers（）；
headers.append（“内容类型”、“应用程序/json”）；
headers.append（“接受”、“应用程序/json”）；
headers.append（“Origin”http://localhost:3000");
axios
.得到(`http://localhost:5000/api/${Name}`，标题）
。然后（（res）=>{
设置状态（真）；
})
.catch（（错误）=>{
console.log（错误）；
});
const公寓=apartmentName.TopropertCase（）；
返回状态？：；
};
返回(
renderMoveIn（routerProps）}
/>
);
}
导出默认应用程序；

在

承诺
被
解决
或
履行之前，似乎DOM将首先呈现。由于
promise
在网络线程上运行，它将在
micro task
线程中对结果回调进行排队，该线程将在DOM完成其第一次渲染后运行

你能做的就是

在组件中设置
isLoading
状态，并将初始值设置为
true
。在
promise
解析后，将其设置为
false
在组件中创建
if
条件，以便在数组为空时加载空的
div
您可以添加代码以显示如何调用
BathOneForm（）
和
MoveInForm（）
吗？现在添加它。。。。
import React, { useState } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router- 
dom";
import styles from "./App.module.css";
import DocumentTitle from "react-document-title";
import MoveInForm from "./pages/MoveInForm";
import NoMatch from "./components/NoMatch";
import Store from "./Store";
import axios from "axios";

function App() {
  const [state, setState] = useState(false);

  //Title Case
  String.prototype.toProperCase = function () {
    return this.replace(/\w\S*/g, function (txt) {
      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
  };

  const renderMoveIn = (routerProps) => {
    const Name = routerProps.match.params.apartment.toLowerCase();
    let headers = new Headers();
    headers.append("Content-Type", "application/json");
    headers.append("Accept", "application/json");
    headers.append("Origin", "http://localhost:3000");
    axios
      .get(`http://localhost:5000/api/${Name}`, headers)
      .then((res) => {
        setState(true);
      })
      .catch((error) => {
        console.log(error);
      });
    const Apartment = apartmentName.toProperCase();
    return state ? <MoveInForm Apartment={Apartment} /> : <NoMatch />;
  };
  return (
    <DocumentTitle title="Move-In Inspection">
      <Store>
        <Router>
          <div className={styles["App"]}>
            <Switch>
              <Route
                path="/:apartment"
                render={(routerProps) => renderMoveIn(routerProps)}
              />
              <Route component={NoMatch} />
            </Switch>
          </div>
        </Router>
      </Store>
    </DocumentTitle>
  );
}

export default App;