Блог

У меня есть следующий компонент React, который выполняет запрос. В перехватчике useEffect я жду результирующих данных, чтобы сопоставить их с новым объектом и передать его в презентационный дочерний компонент.

 import Content from './Content'

export const Component: FC<ComponentProps> = ({
  getGenericLandingPageQuery,
  uid,
  id,
}) => {
  const { data, loading } = useQuery(getGenericLandingPageQuery, {
    variables: {
      uid,
      id,
    },
  })

  const genericLandingPageInitialState: GenericLandingPageInitialStateTypes = {
    meta: undefined,
    contentSlices: [],
    // ...more initial state settings
  }

  const [genericLandingPageState, setGenericLandingPageState] = useState(genericLandingPageInitialState)

  /*
   * Page data
   */
  useEffect(() => {
    if (isValid(data)) {
      const contentSlices = isValid(body)
        ? data.body.map((slice: SectionTypes) => {
          const { slice_type } = slice
          return {
            type: slice_type,
            ...slice,
          }
        })
        : []

      const meta: MetaProps = {
        title: cms_meta_title,
        description: cms_meta_description,
        robots: contextMeta.robots ?? cms_meta_robots,
        canonical: cms_meta_canonical_url,
      }
      const newGenericLandingPageState = {
        ...genericLandingPageState,
        meta,
        contentSlices,
      }
      setGenericLandingPageState(newGenericLandingPageState)
    }
  }, [data])

  console.log(genericLandingPageState)

  return (
      <Content
        sections={genericLandingPageState.contentSlices}
        meta={genericLandingPageState.meta}
      />
  )
}
  

Если запрос извлекается из сети, все в порядке, и содержимое будет отображаться с данными. Когда данные запускаются во второй раз и содержимое передается из кэша, срабатывает перехват useEffect и вызывается setState с новыми данными.

К сожалению, console.log, расположенный чуть выше инструкции render, не будет содержать данные, с которыми вызывается setState в перехватчике, но содержит данные initialState, с помощью которых была инициализирована переменная состояния.

Если я изменю политику выборки на «только для сети», все будет работать нормально.

Кто-нибудь знает, что здесь происходит не так?