Javascript 使用React钩子访问嵌套JSON数据&；道具

我正在尝试进一步访问JSON文件中的数据。我能够轻松访问

行和
区域中前两个数据集中的数据：

data.json
但是，当我尝试访问等待中的数据（包括此块）时：

          "wait": {
            "start": {
              "start_time": 1585129140,
              "delay": 300
            },
            "end": {
              "end_time": 1585130100,
              "delay": 300
            }
          },

屏幕上没有从我的jsx文件返回任何数据，但它可以在控制台日志中找到

TimeTracker.jsx
我在其他组件中使用了相同的模式传递道具，在前两个级别上效果很好，所以我不明白为什么它不起作用。如何在此JSON中进一步获取数据？
一个嵌套属性不能被一个级别的
A.b
访问，因此

<div className={style.startTime}>{trainTime.start_time}</div>

{trainTime.start\u time}

应该是

<div className={style.startTime}>{trainTime.wait.start.start_time}</div>

{trainTime.wait.start.start\u time}
useState
返回一个包含对象的元组和一个用于设置对象值的函数。您可能需要将组件更改为以下内容：

const TimeTracker = (props) => {

  const [trainTime, setTrainTime] = useState(props.data);
  console.log(props.data);


  return (
    <>
      <div className={style.timeLabel}>
      <div className={style.startTime}>{trainTime.start_time}</div>
      <div className={style.endTime}></div>
      </div>
    </>
    )
  };
  export default TimeTracker;


const TimeTracker=（道具）=>{
const[trainTime，setTrainTime]=使用状态（道具数据）；
控制台日志（道具数据）；
返回(
{trainTime.start_time}
)
};
导出默认时间跟踪器；
const trainTime=useState（props.dat）为什么在这里使用状态？
<div className={style.startTime}>{trainTime.start_time}</div>

<div className={style.startTime}>{trainTime.wait.start.start_time}</div>

const TimeTracker = (props) => {

  const [trainTime, setTrainTime] = useState(props.data);
  console.log(props.data);


  return (
    <>
      <div className={style.timeLabel}>
      <div className={style.startTime}>{trainTime.start_time}</div>
      <div className={style.endTime}></div>
      </div>
    </>
    )
  };
  export default TimeTracker;