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

Question

我有点迷路了。我已经这样做了很多次，以前从未遇到过这个问题。我正在将布尔状态传递给模态组件。我遵循了父级的代码并且它设置正确但是一旦它到达模态它returns as undefined.

这是父级：

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。

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

Destructed props sent to child component returning undefined

components

reactjs

react-props