React中使用Axios无法将JSON响应赋值给变量的问题

你的代码存在两个核心问题，导致页面渲染时提示page未定义：

1. State初始值未合理设置
   useState() 未传入默认值时，page 的初始状态为 undefined。即便使用了可选链操作符 ?.，在部分场景下仍可能引发异常，建议直接初始化为空数组：

   const [page, setPage] = useState([]);
   

2. 请求函数未触发执行
   你定义了 fetchPageDetails 但从未调用它，Axios请求根本没有发起，page 始终保持初始的未定义状态。需要通过 useEffect 钩子在组件挂载时触发请求（记得先导入 useEffect）：

   import { useState, useEffect } from 'react';
   

修正后的完整代码：

import { useState, useEffect } from 'react';
import axios from 'axios';

const PageDetails = () => {
  const [page, setPage] = useState([]);
  const [morePages, setMorePages] = useState();

  const fetchPageDetails = () => {
    axios({
      url: $url,
      method: 'get'
    })
    .then((response) => {
      console.log(response.data)
      setPage(response.data);
    })
    .catch((error) => {
      console.log(error);
    });
  };

  useEffect(() => {
    fetchPageDetails();
  }, []); // 空依赖数组确保请求仅在组件挂载时执行一次

  return (
    <>
      <h1>{page[0]?.title}</h1>
      <div>{page[0]?.body}</div>
    </>
  );
};

额外注意：React要求组件返回的JSX必须是单个根元素，原代码直接返回两个元素会报错，因此用<>和</>（Fragment）包裹了渲染内容。

内容的提问来源于stack exchange，提问作者Jay Williams