React hooks - 通過函數從子級設置父級的狀態

Question

伙計們，我剛剛學習 React，我決定嘗試構建 Hero 數據庫，但遇到了一個問題。

當我點擊任何一個英雄時，生物狀態和顯示狀態會隨着有關英雄的數據而更新，模態窗口會彈出有關他的更多信息。 但我不知道如何關閉它。 我將 Modal 作為一個單獨的組件，當我嘗試從子組件調用函數 (updateDisplay) 時。 這應該將顯示狀態設置為 False 它只是不起作用：/

英雄聯盟

import React, { useState } from "react";
import Hero from "./Hero";
import styled from "styled-components";

function Heroes(props) {
  const [Bio, setBio] = useState([]);
  const [Display, setDisplay] = useState(false);

  const SingleHeroCont = styled.div`
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    padding: 10px;
    align-items: center;
  `;

  const content = props.data.map((Hero) => (
    <SingleHeroCont
      onClick={() => {
        setBio(Hero);
        setDisplay(true);
      }}
      key={Hero.id}
    >
      <h1>{Hero.name}</h1>
      <img src={Hero.images.sm} alt="Sorry guys"></img>
    </SingleHeroCont>
  ));

  const updateDisplay = () => {
    setDisplay(false);
  };

  return (
    <div className="heroes_cont">
      <Hero updateDisplay={updateDisplay} Display={Display} BioData={Bio} />
      {content}
    </div>
  );
}

export default Heroes;

英雄.js

import React from "react";
import styled from "styled-components";

function Hero({ Display, updateDisplay, BioData }) {
  const HeroAbsolute = styled.div`
    display: ${(props) => (props.showBio ? "block" : "none")};
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 255, 255, 0.5);
  `;


  return (
    <HeroAbsolute showBio={Display}>
      <div className="hero_bio_cont">
        <h1>{BioData.name}</h1>
        <button onClick={() => updateDisplay}>Close</button>
        <div className="hero_bio_appearance">
          <div>
            <img></img>
            <div>
              <h2>{BioData.powerstats?.power}</h2>
              <h2></h2>
              <h2></h2>
            </div>
          </div>
        </div>
      </div>
    </HeroAbsolute>
  );
}

export default Hero;

Answer 1

<button onClick={() => updateDisplay}>Close</button>

如我所見，上面的代碼無法調用updateDisplay函數。

正確的用法是

<button onClick={() => updateDisplay()}>Close</button>

或者

<button onClick={updateDisplay}>Close</button>

第二種情況請參考箭頭函數教程。