Загрузите содержимое cms перед тем, как подключить компонент

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

Вы всегда можете выполнить проверку перед рендерингом и визуализировать индикатор резервной загрузки.

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..."
  )

Приведенный выше код загружает сообщение, только если оно определено, иначе возвращается «загрузка».

В хуке useEffect вы можете вызвать API и установить состояние.

  useEffect(() => {
      fetch("URL")
        .then(response => response.json())
        .then(json => setPost(json));
  }, [])

Как только вызов API завершится, состояние изменится, и компонент повторно выполнит рендеринг с данными поста.

Пример https://stackblitz.com/edit/react-htofev