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

Question

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

这是父级：

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

Answer 1

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