Блог

Я хочу создать файл данных для своего проекта вместо того, чтобы иметь все в одном файле, однако я использую перехваты реакции для загрузки в изображения. Это становится проблемой, когда я хочу иметь все в отдельных файлах. Код выдает мне сообщение «Недопустимый вызов перехвата», которое я понимаю, почему это неправильно, но не могу понять, как заставить его работать на меня.

EventData.js

 import React from "react"
import Image from "gatsby-image"
import { graphql, useStaticQuery } from "gatsby"

const getImages = graphql`
  {
    btu: file(relativePath: { eq: "eventImage/btu.jpeg" }) {
      childImageSharp {
        fixed(height: 120, width: 500) {
          ...GatsbyImageSharpFixed_withWebp_tracedSVG
        }
      }
    }
  }
`

const data = useStaticQuery(getImages)
export const details = [
  {
    id: 1,
    img: <Image fixed={data.btu.childImageSharp.fixed} />,
    date: "2 Oct 2020",
    distance: "30km - 160km",
    name: "Brisbane Trail Ultra",
    location: "Brisbane, QLD",
  },
]
  

EventCalendar.js

 const EventCalendar = () => {
  return (
    <Layout>
      <section>
        {details.map(details => {
          return <EventCard key={details.id} {...details}></EventCard>
        })}
      </section>
    </Layout>
  )
}
  

Вы должны определить пользовательский перехват, который в вашем случае выглядит примерно так:

 import React from "react"
import Image from "gatsby-image"
import { graphql, useStaticQuery } from "gatsby"

const getImages = graphql`
  {
    btu: file(relativePath: { eq: "eventImage/btu.jpeg" }) {
      childImageSharp {
        fixed(height: 120, width: 500) {
          ...GatsbyImageSharpFixed_withWebp_tracedSVG
        }
      }
    }
  }
  `;

export function useDetails() {    
  const data = useStaticQuery(getImages);

  return [
    {
      id: 1,
      img: <Image fixed={data.btu.childImageSharp.fixed} />,
      date: "2 Oct 2020",
      distance: "30km - 160km",
      name: "Brisbane Trail Ultra",
      location: "Brisbane, QLD",
    },
  ];
}
  

Чтобы определить пользовательские перехваты, определите функцию, которая возвращает нужные вам значения. В этой функции вы можете использовать все перехваты, доступные из API react.

Затем в вашем основном файле напишите

 const EventCalendar = () => {
  const details = useDetails();

  return (
    <Layout>
      <section>
        {details.map(detail => {
          return <EventCard key={details.id} {...detail}></EventCard>
        })}
      </section>
    </Layout>
  )
}
  

Только перехваты вызовов из функций React не вызывают перехваты из обычных функций JavaScript. Вместо этого вы можете:

✅ Перехваты вызовов из компонентов функций React.

✅ Вызывайте перехваты из пользовательских перехватов (мы узнаем о них на следующей странице). Еще одна вещь: внутри карты вы должны изменить details на detail, потому что это элемент

 const EventCalendar = () => {
  return (
    <Layout>
      <section>
        {details.map(detail => {
          return <EventCard key={details.id} {...detail}></EventCard>
        })}
      </section>
    </Layout>
  )
}
  

Вы можете прочитать о перехвате здесь: https://reactjs.org/docs/hooks-rules.html

Мое предложение заключается в том, что вы можете обернуть его в компонент таким образом:

 const ImageHook = () => {
  const data = useStaticQuery(getImages)
  return <Image fixed={data.btu.childImageSharp.fixed}/>
}

export const details = [
  {
    id: 1,
    img:  <ImageHook />,
    date: "2 Oct 2020",
    distance: "30km - 160km",
    name: "Brisbane Trail Ultra",
    location: "Brisbane, QLD",
  },
]