react error: "TypeError: Cannot read properties of undefined (reading 'props')"

Question

我正在尝试为我的每个画廊项目制作一个弹出窗口，其中包含一些关于图片的信息。单击图片并显示弹出窗口效果很好，但我无法关闭它。我得到了可以在标题中读取的错误。我知道“setButtonPopUp”的发送可能有错误，但我还不能理解。

PopUp.js

import React from "react";
import "./PopUp.css";

export default function PopUp(props) {
  return props.trigger ? (
    <div className="popUpWrapper">
      <div className="popUp">
        <button
          className="closePopUp"
          onClick={onClick={props.setTrigger}}
        >
          close
        </button>
        {props.children}
      </div>
    </div>
  ) : (
    ""
  );
}

GalleryItem.js

import "./GalleryItem.css";
import TextItem from "../TextItem/TextItem.js";
import AlertMessage from "../alertMessage.js";
import PopUp from "../PopUp/PopUp.js";
import { useState } from "react";

export default function GalleryItem({ itemData }) {
  const [buttonPopUp, setButtonPopUp] = useState(false);
  if (itemData.polaroid === "light") {
    return (
      <div
        className="itemContainer"
        onClick={() => setButtonPopUp(true)}
      >
        <PopUp trigger={buttonPopUp} setTrigger={() => {
            setButtonPopUp(false);
          }}>
          <h3>Info</h3>
          <p>{itemData.info}</p>
        </PopUp>

        <img className="clip" src="../../assets/klammer.png" alt="" />
        <img className="polaroid" src="../../assets/polaroid.png" alt="" />
        <img className="image" src={itemData.src} alt="" />
        <h2 className="polaroidTitleLight">{itemData.title}</h2>
      </div>
    );
  } else if (itemData.polaroid === "dark") {
    return (
      <div
        className="itemContainer"
        onClick={() => AlertMessage(itemData.info)}
      >
        <img className="clip" src="../../assets/klammer.png" alt="" />
        <img className="polaroid" src="../../assets/polaroid_dark.png" alt="" />
        <img className="image" src={itemData.src} alt="" />
        <h2 className="polaroidTitleDark">{itemData.title}</h2>
      </div>
    );
  } else {
    return <TextItem itemData={itemData} />;
  }
}

我确实注意到，如果我尝试在 App.js 中直接使用 PopUp 组件，PopUp 工作正常。但如果我尝试在 SiteChanger 中使用它，它就不再起作用了。这是 App.js:

App.js

import "./App.css";
import Header from "../Header/Header.js";
import SiteChanger from "../changeSite/changeSite.js";

function App() {
  return (
    <div>
      <Header />
      <SiteChanger />
    </div>
  );
}

export default App;

所有帮助将不胜感激！

Answer 1

您没有在此处发送道具 setTrigger：

  <div
    className="itemContainer"
    onClick={() => setButtonPopUp(true)}
    setTrigger={setButtonPopUp}             // Should go to down PopUp
  >
    <PopUp trigger={buttonPopUp}>
      <h3>Info</h3>
      <p>{itemData.info}</p>
    </PopUp>

此外，功能组件中没有 this。只是props。解决方法如下：

<button
  className="closePopUp"
  onClick={() => props.setTrigger(false)}
//---------------^^^^^                        // Update this
>

发送 props 以更正组件而不是 <div>:

  <div
    className="itemContainer"
    onClick={() => setButtonPopUp(true)}
    // setTrigger={setButtonPopUp}                              // Remove this and...
  >
    <PopUp trigger={buttonPopUp} setTrigger={setButtonPopUp}>   // Add here.
      <h3>Info</h3>
      <p>{itemData.info}</p>
    </PopUp>

react error: "TypeError: Cannot read properties of undefined (reading 'props')"

react error: "TypeError: Cannot read properties of undefined (reading 'props')"

javascript

undefined

reactjs