Question

有一个从商店接收数据的组件。

function Details(props: any) {
  let details: any
  const routeParams: any = useParams(); 

  useEffect(() => {
    details = props.victims.find((victim: any) => routeParams.pk == victim.pk)
    console.log(details)
  }, [props.victims])
  
  return(
    <>
      {
        details && Object.keys(details.fields).map((f: string, i: number) => f)
      }
    </>
  )
}

const mapStateToProps = (state: appStateType) => {
  return {
    victims: state.victimsReducer.victims,
  }
}

export default connect(mapStateToProps, {})(Details)

我需要显示在 useEffect 钩子中生成的已处理数据。但是这个钩子在组件渲染后执行。因此用户只能看到空白屏幕。

请帮我显示在 useEffect 中生成的数据。

Answer 1

您不需要为此使用 useEffect，道具更改将触发重新渲染，您只需过滤即可：

const selectedDetail =  props.victims.find((victim: any) => routeParams.pk == victim.pk)
return(
<>
  {
    selectedDetail && Object.keys(selectedDetail.fields).map((f: string, i: number) => f)
  }
</>

如何显示来自 useEffect 钩子的数据？

1 个答案: