Question

我既是这里的新用户，也是Reactjs，我试图建立一个基本的旅游网站，但遇到错误；我相信这是由于映射，但我看不到出了什么问题，这是错误和代码：

未捕获的TypeError：无法读取未定义的属性“ city” 上面的错误发生在组件中：在Tourlist中（在App.js：9）在div中（位于

Blockquote   App.js：7）       在App中（位于src / index.js：9）

考虑将错误边界添加到树以自定义错误   处理行为。
    import React from "react"
>

    import { Tourdata } from "./components/Tourdata"
    import Tourlist from "./components/Tourlist.js"

    class CityTour extends React.Component {


    state={mytours:Tourdata}    

            render(){  const touring=this.state.mytours 

        return(  
        <section>
    {touring.map(item =>{return <Tourlist key={item.id} tourinfo={item}/>} )}


     </section>
     )     }
    }

export const Tourdata= [{id:1,city:"NewYork",name:"New York museums tour",
img:"https://images.pexels.com/photos/313782/pexels-photo-313782.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"

,info: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, numquam."  }

,{id:2,city:"London",name:"London royal palace tour",
img:"https://images.pexels.com/photos/1837591/pexels-photo-1837591.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"

,info: "Lorem ipsum dolor sit amet, conse

精英教育精英。真确的证明，实实在在的弥补。“}

,{id:3,city:"Istanbul",name:"Istanbul with all aspects",img:"https://images.pexels.com/photos/1549326/pexels-photo-1549326.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
,info: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, at. Nam, voluptate assumenda!" } 


,{id:4,city:"Sydney",name:"Sydney city coast tour",img:"https://images.pexels.com/photos/1872047/pexels-photo-1872047.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" 
,info:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum excepturi omnis deleniti. Accusamus." }]  










import React from "react"
import "./tourlist.scss"


class Tourlist extends React.Component{
state={show:false}

    handleIcon=()=>{this.setState({show:!this.state.show})   }

    render(){const {city,name,img,info}=this.props.tourinfo



        return( <section> 
<div className="img-containers">
<i className="fas fa-window-close fa-3x text-success"></i> 
<img src={img} alt="Countryview" />
</div>
<div className="tourinfo">

<h3>{city}</h3>

<h4>{name}</h4>

<i onClick={this.handleIcon} className="fas fa-caret-square-down text-success"></i>
{this.state.show && <p>{info} </p>}

</div>




</section>
    ) 

    }
}

export default Tourlist


import React, { Component } from 'react';
import './App.css';
import Navbar from "./components/Navbar.js"
import Tourlist from "./components/Tourlist.js"
class App extends Component {
  render() {
    return (<div>
     <Navbar />
      <Tourlist />

      </div>
    );
  }
}

export default App;

Answer 1

您在代码中声明了2 Tourlist。据我了解，此代码块出了点问题。

import React, { Component } from 'react';
import './App.css';
import Navbar from "./components/Navbar.js"
import Tourlist from "./components/Tourlist.js"
class App extends Component {
  render() {
    return (<div>
     <Navbar />
      <Tourlist />    //change to CityTour

      </div>
    );
  }
}

export default App;

请尝试在此处导入CityTour而不是Tourlist，因为错误提示city is undefined表示您没有提供所需的适当道具。根据您的代码，CityTour是具有映射数据组件（Tourlist）的组件，因此CityTour必须在某处声明。

Reactjs TypeError：无法读取未定义的属性“ city”

1 个答案: