Next.js获取API数据后页面渲染问题求助

问题1：document.getElementById 操作DOM报错 #

原因：Next.js组件渲染时，DOM节点可能还未完成挂载，直接调用document.getElementById会找不到元素；另外React的设计理念是通过状态驱动DOM更新，而非直接操作DOM。

解决方案：

• 用useRef获取DOM节点，配合useEffect在DOM挂载后操作：

import { useRef, useEffect } from 'react';

function Blogs() {
  const contentRef = useRef(null);

  useEffect(() => {
    if (contentRef.current) {
      contentRef.current.innerHTML = '加载的内容';
    }
  }, []);

  return <div ref={contentRef}></div>;
}

• 优先通过状态（useState）控制渲染，避免直接操作DOM。

问题2：渲染时变量element显示undefined #

原因：异步数据获取未完成时，变量未被赋值，初始状态没有设置默认值，导致渲染时拿到undefined。

解决方案：

• 初始化状态为合理默认值（比如空数组/空对象），配合条件渲染处理加载状态：

import { useState, useEffect } from 'react';

function Blogs() {
  const [blogs, setBlogs] = useState([]); // 初始化为空数组
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch('http://localhost:3000/api');
      const data = await res.json();
      setBlogs(data);
      setLoading(false);
    }
    fetchData();
  }, []);

  if (loading) return <div>加载中...</div>;

  return (
    <div>
      {blogs.map(blog => (
        <div key={blog.id}>{blog.title}</div>
      ))}
    </div>
  );
}

问题3：组件设为async函数出现Objects are not valid as a React child错误 #

原因：React组件不能是async函数，因为async函数返回的是Promise对象，而React需要的是可渲染的React元素。

解决方案：

• 方案1：在useEffect内部定义异步函数获取数据（如问题2的示例）。
• 方案2：如果是Next.js页面组件，使用官方推荐的数据获取方法（getServerSideProps/getStaticProps），在组件外部获取数据后传入：

// pages/blogs.js
export default function Blogs({ blogs }) {
  return (
    <div>
      {blogs.map(blog => (
        <div key={blog.id}>{blog.title}</div>
      ))}
    </div>
  );
}

// 服务器端渲染时获取数据，客户端请求时每次都会调用
export async function getServerSideProps() {
  const res = await fetch('http://localhost:3000/api');
  const blogs = await res.json();

  return {
    props: { blogs }, // 传递给组件的props
  };
}

问题4：将return放入IIFE后页面无法显示 #

原因：IIFE如果是异步的，会返回Promise，而组件需要返回React元素；非异步IIFE的写法也不符合React组件的渲染逻辑，导致组件没有返回有效内容。

解决方案：

• 放弃IIFE写法，改用useState+useEffect的组合（如问题2示例），或者使用Next.js官方的数据获取方法（如问题3方案2），这两种是React/Next.js中处理异步数据的标准方式。

内容的提问来源于stack exchange，提问作者B M PAVAN