发送到子组件的销毁道具返回未定义

Posted 2023-02-23

【中文标题】发送到子组件的销毁道具返回未定义

【英文标题】：Destructed props sent to child component returning undefined

【发布时间】：2021-11-06 13:01:23

【问题描述】：

我有点迷路了。我已经这样做了很多时间，以前从未遇到过这个问题。我将布尔状态传递给模态组件。我按照父级的代码进行了正确设置，但是一旦到达模态，它就会返回未定义。

这是父级：

import React,  useEffect, Fragment, useState  from 'react'
import './styles.css'
import LandingPageModal from './LandingPageModal'
import  testImages  from './testData'

const LandingPage = () => 
  const [images, setImages] = useState([])
  const [renderImages, setRenderImages] = useState(false)
  const [showModal, setShowModal] = useState(false)
  const [isLoaded, setIsLoaded] = useState(false)

  useEffect(() => 
    setImages(testImages)
    setShowModal(true)
    setIsLoaded(true)
  , [])

  useEffect(() => 
    if (images && images.length > 0) 
      setRenderImages(true)
    
  , [images])

  const FeaturedUsers = () => 
  return (
    renderImages ?
    <Fragment>
        <div className='grid'>
          images.map((image) => (
            <img src=`/images/$image.src` alt=image.caption />
          ))
        </div>
    </Fragment> : ''
  )
  

  return(
    isLoaded ?
      <Fragment>
        <FeaturedUsers />
        <LandingPageModal show=showModal />
      </Fragment> : ''
  )


export default LandingPage

这里是模态：

import React,  useState, useEffect  from 'react'
import ReactModal from 'react-modal'
import './styles.css'

const LandingPageModal = ( showModal ) => 
  const [isModalOpen, setIsModalOpen] = useState(showModal)
  console.log('Is Show: ' + showModal)

  return (
    <ReactModal
      isOpen=isModalOpen
    >
      <div className='main-wrapper'>
        <div className='text'>
          <p>
            <strong>Welcome</strong>
            <br />
            <br />
            Please sign in or sign up
          </p>
        </div>
      </div>
    </ReactModal>
  )


export default LandingPageModal

【参考方案1】：

在LandingPage 组件中，您不小心将showModal 重命名为show。

【讨论】：

.....所以我做到了。谢谢你。新鲜的眼睛等等。