React hooks - 通过函数从子级设置父级的状态

Question

伙计们，我刚刚学习 React，我决定尝试构建英雄数据库，但遇到了问题。

当我点击任何英雄时，生物状态和显示状态会更新有关英雄的数据，并弹出模式窗口，其中包含有关他的更多信息。但我不知道如何关闭它。我将 Modal 作为一个单独的组件，当我尝试从子组件调用函数 (updateDisplay) 时。这应该将显示状态设置为 False 它只是不起作用：/

Heroes.js

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;

Hero.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>

第二种情况请参考箭头函数教程。