Как сделать рендеринг компонента React с пропуском в реквизит

Question

Я создаю Меню, используя React и Redux, но в настоящее время у меня проблема с отображением элементов, когда пользователь выбирает категорию.

Моя цель - отобразить список элементов, вложенных в состояние избыточности определенной категории при нажатии.

В категориях. js, он загружает категории из хранилища избыточности. и отображает их.

import React, { Component } from "react";
import { connect } from "react-redux";
import CategoryItems from "./CategoryItems"
import {
  Card,
  CardTitle,
  CardImg,
  Container,
  Row,
  Col,
  CardBody,
  Button
} from "shards-react";

class Categories extends Component {
  handleClick = category => {

    alert(category.title);

   return (
     <CategoryItems 
      category={category}
     />

   );

  };

  render() {
    let categoryList = this.props.categories.map(category => {
      return (
        <div key={category.id}>
          <Col>
            <Card
              key={category.id}
              onClick={() => {
                this.handleClick(category);
              }}
            >
              <CardBody>
                <CardTitle>{category.title}</CardTitle>
              </CardBody>
            </Card>
          </Col>
        </div>
      );
    });
    return (
      <Container>
        <Row>{categoryList}</Row>
      </Container>
    );
  }
}

const mapStateToProps = state => {
  return {
    categories: state.categories,


  };
};

export default connect(mapStateToProps)(Categories);

При нажатии на категорию (предупреждение было сделано только для того, чтобы я мог убедиться, что данные его сделали) У меня настроено отображение массива элементов, вложенных в выбранную категорию.

import React, { Component } from 'react'
import {
    Card,
    CardTitle,
    CardImg,
    Container,
    Row,
    Col,
    CardBody,
    Button
  } from "shards-react";



export class CategoryItems extends Component {
    render() {
        let items = this.props.category.items;

        let categoryItems = items.map(item => {
            return (
              <Col className="">
                <Card
                  className="mt-2 mb-2 item-col"
                  style={{ maxWidth: "500px" }}
                  key={item.id}
                >
                  <CardBody>
                    <CardTitle style={{ position: "absolute", top: 20, right: 20 }}>
                      {item.title}
                    </CardTitle>
                    <CardImg
                      style={{ maxWidth: "200px" }}
                      src={item.img}
                      alt={item.title}
                    />
                    <span
                      style={{ position: "absolute", bottom: 40, right: 100 }}
                      to="/"
                      // onClick={() => {
                      //   this.handleClick(item.id);
                      // }}
                    >
                      <Button pill theme="info">
                        +
                      </Button>
                    </span>
                    <div style={{ position: "absolute", bottom: 40, right: 20 }}>
                      ${item.price}
                    </div>
                  </CardBody>
                </Card>
              </Col>
            );
          });
          return (
            <Container className="menu-item-cont">
              <Row>{categoryItems}</Row>
            </Container>
          );
    }
}

export default CategoryItems

Эта часть не отображает элементы, и я не получаю сообщение об ошибке.

Я также попытался поместить элементы, которые я хотел бы визуализировать, непосредственно в состояние, просто чтобы посмотреть, смогу ли я заставить их отображаться при клике, подобно тому, как категории. js не повезло.

Я немного новичок, чтобы реагировать, поэтому, пожалуйста, прости меня, если это вопрос новичка.

Любая помощь приветствуется, поскольку я часами пытался это выяснить.

Answer 1

Проблема в том, что вы не визуализируете то, что возвращается из handleClick. Вам нужен условный рендеринг в JSX, затем определите, следует ли рендерить элементы в зависимости от переменной управляемого флага в состоянии.

class Categories extends Component {
  constructor() {
    this.state = {
      show: false,
      category: undefined
    }

    this.toggle = (category) => {
      this.setState({ show: !this.state.show, category })
    }
  }

  render() {
    let categoryList = this.props.categories.map(category => {
      return (
        <div key={category.id}>
          <Col>
            <Card
              key={category.id}
              onClick={e => this.toggle(category)}
            >
              <CardBody>
                <CardTitle>{category.title}</CardTitle>
              </CardBody>
            </Card>
          </Col>
        </div>
      );
    });
    return ([
      <Container>
        <Row>{categoryList}</Row>
      </Container>,
      (
        this.state.show 
        ? <CategoryItems category={this.state.category}/> 
        : null
      )
    ]);
  }
}