Функция карты reactjs не отображает компонент

Это ошибка Я пытаюсь визуализировать функцию createCardHotels, однако, когда я ее запускаю, ничего не отображается. Любая помощь будет оценена по достоинству.

Я использовал функцию карты для циклического перебора данных, и всякий раз, когда я ее запускаю, я вижу на консоли, что данные есть. Проблема только в части рендеринга.

import React, {Component} from 'react';
import {Container, Button, DropdownMenu, DropdownItem, Dropdown, DropdownToggle} from 'reactstrap';
import {Carousel} from 'react-responsive-carousel';
import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';
import './selectHotel.css'
import Scroll from '../ScrollUp';
import {search} from '../../actions/search';
import {connect} from 'react-redux';

class SelectHotel extends Component{
  constructor(props){
      super(props);

      this.state={
          dropdownOpen: false,
          hotels: []
      };
      this.toggleDropdown = this.toggleDropdown.bind(this);
  }

  static getDerivedStateFromProps(state, props){
      if(props.hotels !== state.hotels)
        return{
            ...state,
            hotels: props.hotels
        }
        return null;
  }

  createCardHotels = () => {
     return this.state.hotels.map((hotel) => {
        return(
            <div key={hotel._id} className="card">
                <div className="row ">
                    <div className="col-md-4">
                        <Carousel autoPlay infiniteLoop>
                            <div>
                                <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" className="w-100"/>
                            </div>
                            <div>
                                <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" className="w-100"/>
                            </div>
                            <div>
                                <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" className="w-100"/>
                            </div>
                            <div>
                                <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" className="w-100"/>
                            </div>
                            <div>
                                <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" className="w-100"/>
                            </div>
                            <div>
                                <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" className="w-100"/>
                            </div>
                            <div>
                                <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" className="w-100"/>
                            </div>
                            <div>
                                <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" className="w-100"/>
                            </div>
                        </Carousel>
                    </div>
                    <div className="col-md-5 px-3">
                        <div className="card-block px-3">
                            <h3 className="card-title">{hotel.name}</h3> 
                            <p className="card-text">description</p>
                        </div>
                    </div>
                    <div className="col-md-3 price">
                        <h1 className="reservation-price">$Price</h1>
                        <Button style={cssStyles.buttonRoom} bsStyle="primary">Choose Hotel</Button>
                    </div>
                </div>  
            </div>
            )}
        )
    }

  toggleDropdown() {
    this.setState(prevState => ({
      dropdownOpen: !prevState.dropdownOpen
    }));
  }

  render(){
      console.log(this.state)
      console.log(this.props)
    return(
        <div>
            <Container>
            <Scroll/>
            <div>
            <Dropdown className = 'sortbutton' size="lg" isOpen={this.state.dropdownOpen} toggle={this.toggleDropdown}>
              <DropdownToggle style={{backgroundColor: "white", borderColor: "grey" , color: "black"}} caret>
                  Sort By:
              </DropdownToggle>

              <DropdownMenu>
                <DropdownItem onClick={()=>{this.setSort("low");}}>
                  Price: Low to High
                </DropdownItem>

                <DropdownItem divider />

                <DropdownItem onClick={()=>{this.setSort("high");}}>
                  Price: High to Low
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            </div>
            {this.createCardHotels()}
            <br></br>
            </Container>
        </div>
    );
  }
}

const cssStyles = {
    buttonRoom:{
        backgroundColor: '#156bc1',
        border: '1px solid #156bc1',
        alignItems: 'left',
        boxShadow: 'inset 0 -2px 0 #063665',
        paddingLeft: '2rem',
        paddingRight: '2rem',
        fontSize: '0.8rem'
    }
  }

  const mapStatetoProps = state => {
    return {
        hotels: state.search.hotels
    };
  }

  export default connect(mapStatetoProps, {search})(SelectHotel); 

Обновлено: Это изображение с консоли после того, как я поместил console.log (this.state), console.log (this.props), похоже, что данные есть в this.props, а не в this.state

1
0
588
2

Ответы 2

Проблема заключается в добавлении имен классов к элементам JSX. Вы используете класс для применения стилей css с именами классов, но класс зарезервирован для создания компонентов класса в React, поэтому вам нужно использовать className

Везде, где вы видите класс в элементах jsx, измените его на className

Также никогда не забывайте добавлять ключ к верхнему родительскому элементу jsx при рендеринге их в цикле. Если у вас есть уникальный из данных, установите идентификатор из данных в качестве ключа, как я сделал ниже, иначе используйте индекс в качестве ключа

Изменять

  return this.state.hotels.map((hotel) => {
    return(
        <div class="card">
         ........

К

  return this.state.hotels.map((hotel) => {
    return(
        <div key={hotel.id} className="card">
         .......

Также

Изменять

   <h1 className="reservation-price">$Price</h1>

К

   <h1 className="reservation-price">{"$Price"}</h1>

Для изображений вам нужно использовать require или import

Изменять

  <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" className="w-100"/>

К

  <img src={require("https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400")} className="w-100"/>

Сделайте то же самое и для других изображений.

Или импортировать как

  import text from "https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400";

  <img src={text} className="w-100"/>

Я просто сделал именно то, что вы мне сказали, но безуспешно. Это все то же самое

Le Tuan Anh 26.10.2018 08:43

Пожалуйста, отредактируйте свой вопрос и разместите последний код в вопросе, который я посмотрю

Hemadri Dasari 26.10.2018 08:44

Я включил обновленный код, а также фрагмент консоли. Кстати, спасибо, что помогли мне.

Le Tuan Anh 26.10.2018 08:50

Измените все на className и проверьте мой обновленный ответ. Сообщите мне, если вы увидите какие-либо ошибки в консоли

Hemadri Dasari 26.10.2018 09:00

После того, как я заменил class на className, он остался прежним. «$ Price» - это просто строка, я еще ничего с ней не делал. Я снова отправлю обновленный код

Le Tuan Anh 26.10.2018 09:10

Я обновил свой ответ. Пожалуйста, попробуйте, вам нужно использовать require или import для импорта изображений в React

Hemadri Dasari 26.10.2018 09:23

После того, как я обновил код, у меня появилась ошибка, говорящая, что модуль не найден.

Le Tuan Anh 26.10.2018 09:29

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

Le Tuan Anh 26.10.2018 10:14

Не могли бы вы показать свой строительный файл. Может быть проблема с загрузчиком файлов.

Другие вопросы по теме