ReactJS - 状态变量在页面上显示之前不存储 JSON 响应

Question

Context：我正在使用使用 Async/Await 的 Axios 从 GET 请求中检索 JSON 响应。它存储在 useMemo 挂钩中名为

tutorDetails

的状态变量中。我正在

return

代码块中访问 React JSX 中存储的状态变量，但在显示内容之前它没有填充预期的 JSON 响应。

问题：有没有办法确保返回的 JSX 代码块只在状态变量被填充后才被处理？如果没有，请提出任何其他解决方法。

代码：

import React, {useState, useMemo} from "react";
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import Slide from '@mui/material/Slide';
import axios from 'axios';

 function TutorCard({tutor_id, first_name, last_name, grade, subject}) {
    return (
        <div className="md:flex bg-white shadow text-gray-800 my-4 py-4 px-10 rounded-md items-center justify-between hover:bg-gray-300"  >
            {/* <img
                style={{ maxWidth: "60px"}}
                className="rounded-full shadow-md border border-gray-300"
                src={image}
                alt="employee"
            /> */}
            <p className="font text-md" style={{ color: 'black', textAlign: "center"}}>{tutor_id}</p>
            <p className="font text-md" style={{ color: 'black', textAlign: "center"}}>{first_name}</p>
            <p className="font text-md" style={{ color: 'black', textAlign: "center" }}>{last_name}</p>
            <p style={{ color: 'black', textAlign: "center" }}>{grade}</p>
            <p style={{ color: 'black', textAlign: "center" }}>{subject}</p>
            <AlertDialogSlide tutorID = {tutor_id} firstName = {first_name} lastName = {last_name} grade = {grade} subject = {subject} />
        </div>
    )
}




const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});

function AlertDialogSlide(props) {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const [tutorDetails, setTutorDetails] = useState([ ])

components (componentDidMount, componentWillMount)
    useMemo( () => {
    const retrieveData = async () => {
        const resp = await axios.get('API call' + props.tutorID);
        console.log("Tutor Info Response: " + JSON.stringify(resp.data));
        console.log("AltSubjects: " + JSON.stringify(resp.data.subjects[0]));
        setTutorDetails(resp.data);

    }

    retrieveData();
}, []);

    

  return (
    <div>
      <Button variant="outlined" onClick={handleClickOpen}>
        {'>'}
      </Button>
      <Dialog
        open={open}
        TransitionComponent={Transition}
        keepMounted
        onClose={handleClose}
        aria-describedby="alert-dialog-slide-description"
        fullWidth = {true}
      >
        <DialogTitle>{props.firstName + " " + props.lastName}</DialogTitle>
        <DialogContent>
          <DialogContentText >
            <strong>Level: </strong> {props.grade} <br/>
            <strong>Subject: </strong> {props.subject} <br/>
            {/* <div> {(tutorDetails.subjects).map(sub => <div>  <strong>Alternative Subject: </strong> {JSON.stringify(sub)} <br/> </div>)} </div> */}
            <strong>Alternative Subject: </strong> {tutorDetails.subjects[0]} <br/>
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Close</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}
export default TutorCard;