Question

我想将我的帖子从ButterCMS导入到React，但是我不知道如何处理异步问题。

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"}>
          <div className={"first-post"}>
            <figure className={"image"}>
              <img src={gradient} alt=""></img>
            </figure>

            <div className={"first-post-title"}>
              <h2>
                {post.title.length > 20
                  ? post.title.slice(0, 85) + " ..."
                  : post.title}
              </h2>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

每次运行此命令时，都会显示错误post is undefined。仅在定义帖子后，才可以渲染元素？

Answer 1

您始终可以在渲染之前进行检查并渲染后备加载指示器。

amountFile.loc[:, 'total_amount'] = amountFile.groupby('ID')["item_amount"].transform('sum')

以上代码仅在定义后才加载post，否则返回“ loading”。

在return ( post ? <div className={"section"}> <div className={"container"}> <div className={"first-post"}> <div className={"first-post-title"}> <h2> {post.title.length > 20 ? post.title.slice(0, 85) + " ..." : post.title} </h2> </div> </div> </div> </div> : "loading..." )挂钩中，您可以调用API并设置状态。

useEffect

API调用完成后，状态将更改，并且组件将使用发布数据重新渲染。

示例https://stackblitz.com/edit/react-htofev

在安装组件之前加载cms内容

1 个答案: