reactjs - React - 单击时显示 Div

Question

当我单击另一个组件时，我想显示一个组件。我在开始时将值“showPanelInfo”设置为 false，当我单击“CharacterCard”组件时，我尝试将 setShowPanelInfo 的值更改为 true，但它不起作用。

import React from "react";
import { useQuery, gql } from "@apollo/client";
import styled from "styled-components";
import { QueryResult } from "../components";
import CharacterCard from "../containers/characters/character-card";
import CharacterPanelCard from "../components/characters/character-panel-card";
import CreatePlanetModal from "../components/characters/create-character-modal";

const Characters = () => {
  const { loading, error, data } = useQuery(GET_CHARACTERS);


  // SHOW HIDE PLANET PANEL

  const [showPanelInfo, setShowPanelInfo] = React.useState(false);
  const displayPanelInfo = () => setShowPanelInfo(true);
  const hidePanelInfo = () => setShowPanelInfo(false);


  // CREATE ID IN STATE - DEFAULT 1
  const [characterId, setCharacterId] = React.useState(1);

  return (
    <PageContainer>
      <ResultContainer>
        <QueryResult error={error} loading={loading} data={data}>
          {/* Grid of characters */}
          {data?.characters?.map((character) => (
            <CharacterCard
              key={`${character.id}`}
              character={character}
              onClick={() => {
                displayPanelInfo();
                setCharacterId(character.id);
              }}
            />
          ))}
        </QueryResult>


      {/* Panel Container */}
      {showPanelInfo ? (
        <CharacterPanelCard characterId={characterId} />
      ) : null}

    </PageContainer>
  );
};

export default Characters;

有任何想法吗？

谢谢！

标签： reactjs