Question

This is the error我正在尝试呈现createCardHotels函数；但是，每当我运行它时，都不会显示任何内容。任何帮助将不胜感激。

我使用了map函数来遍历数据，每次运行它时，我都会在控制台上看到有数据。问题只是渲染部分。

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);

编辑： This is the image from console after I put console.log(this.state), console.log(this.props), it seems like there is data in this.props and not in this.state

Answer 1

问题在于将类名称添加到JSX元素。您正在使用class来应用带有class名称的css样式，但是class被保留用于在React中创建类组件，因此您需要使用className

只要您看到jsx元素上的类将其更改为className

在循环渲染它们时，永远不要忘记将键添加到顶级父jsx元素。如果您的数据具有唯一性，则像我在下面所做的那样，将数据的id设置为键，否则将index用作键

更改

  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"/>

Answer 2

请您出示建筑文件。可能是文件加载器有问题。

ReactJS Map函数不呈现组件

2 个答案: