时间戳

首页 > 解决方案 > 在 useEffect 中更改数组值

javascript - 在 useEffect 中更改数组值

问题描述

我对javascript / React很陌生，不到5个月的经验，所以有很多错误，我想要实现的是......

当用户单击按钮时，国家/地区值会发生变化，我想做这样的事情。

if (country === "Singapore") {   setTeams(sg.items)  } else {   setTeams(my.items) }

但我无法在 useEffect 钩子中实现它，或者我的方法是错误的。

  const [country, setCountry] = useState("Singapore")

  const sg = data.sgteamlist
  const my = data.myteamlist

  useEffect(() => {
    setTeams(sg.items)
  }, [])

  const [teams, setTeams] = useState([])
  const [currentPage, setCurrentPage] = useState(1)
  const [teamsPerPage] = useState(5)

  // Get current teams
  const indexOfLastTeam = currentPage * teamsPerPage
  const indexOfFirstTeam = indexOfLastTeam - teamsPerPage
  const currentTeams = teams.slice(indexOfFirstTeam, indexOfLastTeam)
  const paginate = pageNumber => setCurrentPage(pageNumber)

  return (
    <Layout>
      <Box px="7.5%" color="white.50" pb="20rem">
        <SEO title="About" />
        <Helmet bodyAttributes={{ class: "about-page" }} />
        <TeamGrid teams={currentTeams} />
        <ButtonToggler onClick={() => setCountry("Singapore")}>
          Singapore
        </ButtonToggler>
        <ButtonToggler onClick={() => setCountry("Malaysia")}>
          Malaysia
        </ButtonToggler>
        <Pagination
          teamsPerPage={teamsPerPage}
          totalTeams={teams.length}
          paginate={paginate}
        />
      </Box>
    </Layout>
  )
}

export default AboutPage

我想根据国家/地区的值更改 setTeams 数组。

标签： javascriptreactjs

解决方案

country作为依赖项添加到您的效果中。每次变量不同时，依赖数组都会运行你的效果，基于浅层检查。

此外，您应该在状态变量的定义之后移动您的 useEffect teams。

const [teams, setTeams] = useState(sg.items);

useEffect(() => {
  if(country === 'Singapore') {
    setTeams(sg.items)
  } else {
    setTeams(my.items)
  },
}, [country])

推荐阅读