如何在渲染子组件道具之前获取 Redux 状态？

Question

我有一个组件渲染另一个组件，它依赖于 Redux 中的 currentUser 状态。但是，在初始加载时，该值是未定义的。如何在继续之前强制定义该值？

具有状态的组件：

import { Grid, Typography } from "@material-ui/core"
import { makeStyles } from "@material-ui/styles"
import { useEffect, useState } from "react"
import DataScroll from "./navigation/DataScroll"
import Post from '../components/partsbin/Post'
import SidePanelCard from '../components/SidePanelCard'
import { getPosts } from "../gql/queries"
import { useSelector } from 'react-redux'
const theme = makeStyles({})

export default function HappeningNow(props: any) {
  const styles = theme()
  const { currentUser } = useSelector(({ uiState }: any) => uiState)

  const handleGetPosts = async (offset: number, limit: number) => {
    try {
      const data = await getPosts(offset, limit, null, currentUser?.uid || null)
      console.log('params being passed: ', offset, limit, null, currentUser?.uid)
      console.log('data returned', data)
      return data
    } catch(e) {
      return e
    }
  }

  return (
    <Grid container flexDirection="column">
      <Grid item>
        <Typography
          variant="h6"
          sx={{ fontWeight: "bold", textAlign: "center" }}
        >
          Happening Now
        </Typography>
      </Grid>
      <Grid item>
        <DataScroll ItemComponent={SidePanelCard} limit={12} getApiItems={(offset: number, limit: number) => handleGetPosts(offset, limit)} />
      </Grid>
    </Grid>
  )
}

如您所见，我正在通过 useSelector 设置 currentUser，但查询 handleGetPosts 在定义 currentUser 之前触发。我们如何保证该值已设置？用局部状态包裹全局状态是好习惯吗？有没有办法在 useEffect 中使用 useSelector？我不知道从哪里开始。

Answer 1

当您获得值 currentUser 时，组件将重新呈现。所以你可以添加一个简单的条件来检查 currentUser 是否可用。喜欢，

{currentUser && <DataScroll ItemComponent={SidePanelCard} limit={12} getApiItems={(offset: number, limit: number) => handleGetPosts(offset, limit)} />} .

现在 handleGetPosts 应该仅在设置 currentUser 时触发。

如何在渲染子组件道具之前获取 Redux 状态？

How to get Redux state before render for child component prop?

reactjs

redux

react-redux

react-state