Блог

я здесь новый пользователь и reactjs, я пытался создать базовый сайт тура, но получаю ошибку; Я полагаю, это из-за сопоставления, но я не могу понять, что не так, вот ошибка и коды:

Неперехваченная ошибка типа: не удается прочитать свойство «город» неопределенного значения Вышеуказанная ошибка произошла в компоненте: в списке туров (в App.js: 9) в div (в

Блокировка цитаты App.js: 7) в приложении (в 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=compressamp;cs=tinysrgbamp;dpr=1amp;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=compressamp;cs=tinysrgbamp;dpr=1amp;w=500"

,info: "Lorem ipsum dolor sit amet, conse
  

ctetur adipisicing elit. Delectus reprehenderit veritatis, expedita reiciendis quia voluptatum.» }

 ,{id:3,city:"Istanbul",name:"Istanbul with all aspects",img:"https://images.pexels.com/photos/1549326/pexels-photo-1549326.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;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=compressamp;cs=tinysrgbamp;dpr=1amp;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 amp;amp; <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;
  

вы объявили 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 это компонент с отображенными данными component ( Tourlist ), поэтому CityTour должен быть где-то объявлен.