javascript - 为什么我的地图功能不能在数组中工作？

问题描述

我的地图没有出现在我的组件中。我正在尝试制作一个轮播来显示短语和作者（一次推荐/作者）。我将地图放在一个数组中，但它不起作用。我不知道最好的方法是什么。我需要一点帮助。

useQuoteQuery.js：（抓取数据）

import { useStaticQuery, graphql } from 'gatsby'

export const useQuoteQuery = () => {
  const data = useStaticQuery(graphql`
    query QuoteQuery {
      wpPage(databaseId: { eq: 13 }) {
        id
        ACF_HomePage {
          socialProve {
            testimony
            author
          }
        }
      }
    }
  `)
  return data
}

在graphql上：（它完美地工作）

引用.js

import React, { useState, useEffect } from 'react'
import { useQuoteQuery } from '../../hooks/useQuoteQuery'
import QuoteImg from '../../images/quote.svg'
import { Content, Wrapper } from './Quote.styles'
import { BiRightArrow, BiLeftArrow } from 'react-icons/bi'

const Quote = () => {
  const {
    wpPage: { ACF_HomePage: data }
  } = useQuoteQuery()

// edited - map return array but returns: Array(3)
// 0: {$$typeof: Symbol(react.element) ......
  
const quotes = data.socialProve.map(quote => {
return <li key={quote.toString()}>{quote.socialProve}</li>
  })

  // set interval
  useEffect(() => {
    const timer = window.setInterval(() => {
      setActiveIndex(prev => (prev + 1 >= quotes.length ? 0 : prev + 1))
    }, 5000)

    return () => {
      window.clearInterval(timer)
    }
  }, [quotes])

  const [activeIndex, setActiveIndex] = useState(0)

  const activeQuote = quotes[activeIndex]

  const handleNextClick = () => {
    setActiveIndex(prev => (prev + 1 >= quotes.length ? 0 : prev + 1))
  }

  const handlePrevClick = () => {
    setActiveIndex(prev => prev - 1)
  }

  return (
    <Wrapper>
      <Content>
        <img src={QuoteImg} alt="aspas" />
        <h6>{activeQuote.testimony}</h6>
        <p>{activeQuote.author}</p>
        <BiLeftArrow
          size="20"
          className="button-arrow"
          onClick={handlePrevClick}
        >
          Anterior
        </BiLeftArrow>
        <BiRightArrow
          size="20"
          className="button-arrow"
          onClick={handleNextClick}
        >
          Próximo
        </BiRightArrow>
      </Content>
    </Wrapper>
  )
}

export default Quote

结果：

vs code终端没有错误。

标签： javascriptreactjs

该quotes数组将由生成的数组包装.map在一个无关的数组中。删除结果周围的额外数组.map：

const quotes = data.socialProve.map((quote) => {
  return <div key={quote.toString()}>{quote.socialProve}</div>;
});

javascript - 为什么我的地图功能不能在数组中工作？

问题描述

解决方案

推荐阅读