程序员经验分享-hwhale

Reactjs 地图函数不渲染组件

2024-04-05

这是错误 https://i.stack.imgur.com/zmiR6.png我正在尝试渲染 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);

EDIT: 这是我放入 console.log(this.state)、console.log(this.props) 后来自控制台的图像，看起来 this.props 中有数据而不是 this.state https://i.stack.imgur.com/PcezF.png


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

无论您在 jsx 元素上看到 class ，都将其更改为 className

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

Change

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

To

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

Also

Change

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

To

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

对于图像，您需要使用 require 或 import

Change

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

To

  <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"/>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJS

Reactjs 地图函数不渲染组件 的相关文章

随机推荐

  • 如何在窗口模式下禁用 VS Code 小地图？

    我在 Visual Studio Code 中执行了以下操作 settings json gt editor minimap enabled true 并排打开 2ed 文件 窗口模式 小地图存在于两个窗口中 这占用了太多空间 但当我在单个

  • 如何实现pdf编辑器

    I am working on an application and I am using pdfkit which I should have the ability to read pdf files and edit them I f

  • 如何在 ElasticSearch 中从形状获取交点

    我已经存储了一条路线ElasticSearch作为多边形 现在我有一个圆 一个点和一个半径 我可以检查圆点是否与多边形相交 下面是我使用的代码 问题 如何获取与圆相交的路线上的点 public Boolean isMatchingDoc L

  • 省略 Doctrine 生成的 SQL 的鉴别器部分

    假设以下情况AbstractPage model ORM Entity ORM Table name page ORM InheritanceType SINGLE TABLE ORM DiscriminatorColumn name ty

  • 在单个查询中从 mongo 中删除多个文档

    我有一个要删除的 mongo id 列表 目前我正在这样做 inactive users gt list of inactive users for item in inactive users db users remove id ite

  • VHDL (Xilinx) 中的错误：无法链接设计

    为什么我在 VHDL 中遇到错误 另外 有时 无法执行流程 因为之前的流程失败了 非常感谢 永久解决方案1 在win 10上 找出 installation directory Xilinx 14 x ISE DS ISE gnu MinG

  • 为什么会有 CL_DEVICE_MAX_WORK_GROUP_SIZE？

    我试图了解 OpenCL 设备 例如 GPU 的体系结构 但我不明白为什么本地工作组中的工作项数量有明确的限制 即常量 CL DEVICE MAX WORK GROUP SIZE 在我看来 这应该由编译器处理 即 如果 为简单起见 一维 内

  • 云平台- sudo：无法解析主机[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我在 Amazon EC2 和 openstack 上使用 Linux 作为基于云的服务器 当尝试运行时 sudo chhown ubun

  • 什么时候应该在汇编中使用显式对齐指令？

    我花了一些时间进行汇编编程 特别是 Gas 最近我了解了对齐指令 我想我已经了解了最基本的知识 但我想更深入地了解其本质以及何时使用对齐 例如 我想知道一个简单的 C switch 语句的汇编代码 我知道在某些情况下switch语句是基于跳

  • 如何使用 Node.js 中的 WebSocket (websockets/ws) 库获取客户端 IP 地址？

    我在客户端对象上找不到客户端 IP 参数 经过一番尝试找出客户端 网络浏览器 IP 地址是哪一个提供的 答案是 ws socket remoteAddress 或者如果您有权访问req via wss on connection ws re

  • 无法登录 Openshift

    我已经尝试通过 Openshift 连接到我的应用程序好几天了 但仍然没有成功 我现在不确定该去哪个论坛 因为我没有在任何地方获得帮助 1 我将通过终端并运行sudo rhc setup 我之所以使用sudo是因为没有它就无法进行下一步 2

  • 使用 git diff，如何获取添加和修改的行号？

    假设我有一个文本文件 alex bob matrix will be removed git repo 我已将其更新为 alex new line here another new line bob matrix git 在这里 我添加了行

  • wget ssl 警报握手失败

    我尝试从 https 站点下载文件并不断收到以下错误 OpenSSL error 14077410 SSL routines SSL23 GET SERVER HELLO sslv3 alert handshake failure Unab

  • 列出AWS S3存储桶中的所有对象

    我试图弄清楚如何在 Swift 中列出 AWS S3 存储桶中的所有对象 我似乎无法在互联网上的任何地方找到信息 但也许我看起来不够努力 如果有人可以向我推荐允许我执行此操作的代码 那就太好了 不知道你是否还需要它 但你可以 let cre

  • 如何在delphi 7中将unicode字符转换为ascii代码？

    是的 我们正在谈论 ASCII 代码 抱歉 我不是这里的 Delphi 开发人员 对于 Delphi 7 我会得到Mike Lischke 的免费 Unicode 库 http www soft gems net index php lib

  • 像#include 这样的预处理器指令只能放在程序代码的顶部吗？

    我已经用过 pragma函数内的指令没有错误或警告 特别是 pragma pack 但是下面的代码显示了警告incompatible implicit declaration of built in function printf int

  • 四人帮 - 设计模式 - 这些模式示例是否以过时的方式编码？

    所以为了澄清我的问题 臭名昭著的 GoF 书中的每个模式 设计模式 可重用的面向对象软件的元素 有 C 代码示例 这些是最新的吗 或者现在的 C 代码看起来有很大不同吗 我这么问是因为当我发布带有最后一个问题的代码时 许多 C 开发人员告诉

  • 九补丁与矢量图形

    我正在学习 Android UI 但不清楚为什么人们在可以使用矢量图形的情况下使用九个补丁 因为它们是可扩展的 不会出现任何像素退化 我是 Android 的初学者 所以我希望我在这里不会遗漏任何东西 但似乎构建矢量图形并使用它们会更容易

  • 为什么部分应用函数会延迟 Scala 中的类实例化？

    想象一下这段代码 class Foo println in Foo def foo a Int a 1 现在 如果我们调用 new Foo foo 将按预期创建 Foo 类的实例 in Foo res0 Int gt Int

  • Reactjs 地图函数不渲染组件

    这是错误 https i stack imgur com zmiR6 png我正在尝试渲染 createCardHotels 函数 但是 每当我运行它时 什么也没有显示 任何帮助将不胜感激 我使用地图函数来循环数据 每当我运行它时 我都可以

热门标签