React组件挂载前加载ButterCMS内容，解决异步渲染报错问题

嘿，这个问题太常见啦！你遇到的核心问题是：组件第一次渲染时，异步请求还没完成，post的初始状态是undefined，这时候直接去访问post.title自然会报错。咱们来一步步搞定它：

为什么会报错？ #

你的组件挂载后会立刻执行渲染逻辑，但butter.post.list是异步请求，需要时间返回数据。第一次渲染时setPost还没被调用，post还是初始的undefined，所以post.title就会抛出"Cannot read properties of undefined"的错误。

方案1：直接用条件渲染（快速修复） #

最简单的方式就是在渲染post相关内容前，先判断post是否存在。可以用逻辑与&&或者三元运算符：

import React, { useState } from "react"
import Butter from "buttercms"
import gradient from "../../images/TealLove.jpg"

export default () => {
  const butter = Butter("API_KEY")
  const [post, setPost] = useState()

  butter.post.list({ page: 1, page_size: 10 }).then(function(response) {
    setPost(response.data.data[0])
  })

  return (
    <>
      <div className={"section"}>
        <div className={"container"}>
          {/* 只有当post存在时才渲染内容 */}
          {post && (
            <div className={"first-post"}>
              <figure className={"image"}>
                <img src={gradient} alt="Teal gradient background"></img>
              </figure>
              <div className={"first-post-title"}>
                <h2>
                  {post.title.length > 20 ? post.title.slice(0, 85) + " ..." : post.title}
                </h2>
              </div>
            </div>
          )}
          {/* 可以加个加载提示，让用户知道正在加载 */}
          {!post && <div>加载中...</div>}
        </div>
      </div>
    </>
  )
}

方案2：用useEffect规范异步请求（更推荐） #

你现在直接在组件函数里调用异步请求，会导致每次组件渲染都重新发起请求，这很浪费资源。把请求放到useEffect钩子中，配合加载和错误状态，代码会更健壮：

import React, { useState, useEffect } from "react"
import Butter from "buttercms"
import gradient from "../../images/TealLove.jpg"

export default () => {
  const butter = Butter("API_KEY")
  const [post, setPost] = useState(null) // 初始值设为null，语义更明确
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    // 用async/await让异步代码更易读
    const fetchFirstPost = async () => {
      try {
        const response = await butter.post.list({ page: 1, page_size: 10 })
        setPost(response.data.data[0])
      } catch (err) {
        setError("加载文章失败，请稍后重试")
        console.error("ButterCMS请求错误：", err)
      } finally {
        setLoading(false) // 不管成功失败，都结束加载状态
      }
    }

    fetchFirstPost()
  }, []) // 空依赖数组表示只在组件挂载时执行一次

  // 加载状态下显示提示
  if (loading) {
    return <div className="loading">加载中...</div>
  }

  // 错误状态下显示错误信息
  if (error) {
    return <div className="error">{error}</div>
  }

  // 如果post为空（比如请求返回空数据），也给个提示
  if (!post) {
    return <div>暂无文章内容</div>
  }

  // 所有状态正常时，渲染文章内容
  return (
    <>
      <div className={"section"}>
        <div className={"container"}>
          <div className={"first-post"}>
            <figure className={"image"}>
              <img src={gradient} alt="Teal gradient background"></img>
            </figure>
            <div className={"first-post-title"}>
              <h2>
                {post.title.length > 20 ? post.title.slice(0, 85) + " ..." : post.title}
              </h2>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

这个方案的好处是：

• 避免重复发起请求
• 有明确的加载和错误状态，提升用户体验
• 用async/await替代then，代码更易维护

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