Question

当我单击Component时，我试图在模态中显示组件。我已经做到了，但是每当我关闭模态时，组件都不会重新渲染（它从列表中消失了）。我有4个组件，但是关闭模态后得到3。单击关闭模态后，单击以获取模态的组件没有显示。但是我想在关闭模态后显示组件。我认为问题出在国家问题上，但是我无法解决需要帮助的问题。那么我该如何解决这个问题呢？预先感谢。

这是我的shirt.js文件，发生以上所有情况：

import React, { Component, useState } from "react";
import { Link } from "react-router-dom";
//COMPONENTS
import { Container, Row, Col, Modal, Button } from "react-bootstrap";
import FeatureCard from "../../widgets/ShoppingCards/FeatureCard/FeatureCard";
import AllDressHeader from "../../widgets/AllDressHeader/AllDressHeader";
import ProductCard from "../../widgets/ShoppingCards/ProductCard/ProductCard";
import Slider from "react-slick";

//Images
import ShirtHeader from "../../../assets/Shirts/header-new.jpg";
import img from "../../../assets/Shirts/A-unsplash.jpg";
import img2 from "../../../assets/Shirts/ocean-shirt.jpg";
import img3 from "../../../assets/Shirts/L-unsplash.jpg";
import img4 from "../../../assets/Shirts/denim.jpg";
import img5 from "../../../assets/Shirts/R-unsplash.jpg";
import img6 from "../../../assets/Shirts/P-denim.jpg";
import img7 from "../../../assets/Shirts/Q-unsplash.jpg";
import img8 from "../../../assets/Shirts/Y-unsplash.jpg";
import img9 from "../../../assets/Shirts/Mens-Popover.jpg";
import img10 from "../../../assets/Shirts/blur-shirt.jpg";
import shirts from "../../../assets/Shirts/A-unsplash.jpg";

class Shirts extends Component {
  state = {
    whichComponentToShow: "FeatureCard",
    showFeatureCard: true,
    show: false,
  };

  onClick = () => {
    this.setState({ whichComponentToShow: "ProductCard", show: true });
  };

  handleClose = () => {
    this.setState({ show: false });
  };
  handleShow = () => {
    this.setState({ show: true });
  };

  render() {
    const featureCard = () => {
      return (
        <FeatureCard
          OnClick={this.onClick}
          image={img}
          title="Sky Blue"
          price="9$"
        />
      );
    };

    const productCard = (
      <ProductCard image={shirts} title="Sky Blue" price="9$" add="shirt" />
    );

    //WHICH COMPONENT TO SHOW
    const ShowComponent = () => {
      if (this.state.whichComponentToShow === "FeatureCard") {
        return <div>{featureCard()}</div>;
      } else if (this.state.whichComponentToShow === "ProductCard") {
        return (
          <div>
            <Modal
              show={this.state.show}
              onHide={this.handleClose}
              centered
              size="xl"
            >
              <Modal.Header closeButton></Modal.Header>
              <Modal.Body>
                <Container fluid>
                  <Row>
                    <Col lg={12}> {productCard}</Col>
                  </Row>
                </Container>
              </Modal.Body>
              <Modal.Footer>
                <Button variant="secondary" onClick={this.handleClose}>
                  Close
                </Button>
              </Modal.Footer>
            </Modal>
          </div>
        );
      }
    };

    return (
      <div className="Shirts" style={{ margin: "3rem 0rem" }}>
        <div>
          <AllDressHeader
            Image={ShirtHeader}
            h1="SHIRTS FOR MEN"
            para="Id adipisicing elit adipisicing Lorem. Laborum deserunt laboris ex aliqua deserunt ipsum irure culpa pariatur in esse esse quis. Laboris incididunt enim velit reprehenderit irure. Do est deserunt sint."
            h2="CHOOSE YOUR FAVOURITE SHIRT NOW"
          />
        </div>
        <Container>
          <Row>
            <div>{ShowComponent()}</div>

            <Col>
              <FeatureCard image={img2} title="Beach Light" price="25.50$" />
            </Col>
            <Col>
              <div>
                <FeatureCard
                  image={img3}
                  title="Official Formal"
                  price="9.99$"
                />
              </div>
            </Col>
            <Col>
              <div>
                <FeatureCard image={img4} title="Denim" price="19$" />
              </div>
            </Col>
          </Row>
          <Row>
            <Col>
              <div>
                <FeatureCard image={img5} title="Red Black" price="12$" />
              </div>
            </Col>
            <Col>
              <div>
                <FeatureCard
                  image={img6}
                  title="Blue White Denim"
                  price="56$"
                />
              </div>
            </Col>
            <Col>
              <div>
                <FeatureCard
                  image={img7}
                  title="White Long Sleeve"
                  price="8$"
                />
              </div>
            </Col>
            <Col>
              <div>
                <FeatureCard image={img8} title="Blue Dotted" price="9.50$" />
              </div>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Shirts;

这是我的组件：

import React, { useState } from "react";
import { Card } from "react-bootstrap";
import "./FeatureCard.css";

const FeatureCard = (props) => {
  return (
    <div onClick={props.OnClick} className="FeatureCard">
      <div style={{ textDecoration: "none", color: "#000" }}>
        <Card
          style={{
            width: "18rem",
            paddingLeft: "20px",
            paddingRight: "20px",
            overflow: "hidden",
          }}
        >
          <div className="cardImg">
            <Card.Img variant="top" src={props.image} className="ppImage" />
          </div>
          <Card.Body>
            <div className="d-flex flex-column">
              <div
                style={{ paddingBottom: "10px" }}
                className="d-flex flex-row justify-content-between"
              >
                <p>
                  <b>{props.title}</b>
                </p>
                <h6>{props.price}</h6>
              </div>
              <div className="colors-circle">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
          </Card.Body>
        </Card>
      </div>
    </div>
  );
};

export default FeatureCard;

Answer 1

存在类型问题

将传递的函数名称onClick更改为OnClick

       <FeatureCard
          OnClick={this.OnClick}
          image={img}
          title="Sky Blue"
          price="9$"
        />

因为您正在访问props.OnClick

Answer 2

您必须通过在shirt.js的handleClose函数中添加whichComponentToShow: 'FeatureCard'来更新状态，如下所示：

  handleClose = () => {
    this.setState({ whichComponentToShow: 'FeatureCard', show: false })
  }

如果此答案有帮助，请标记出来！

按下关闭按钮后，Reactjs组件未重新渲染

2 个答案: