映射数组返回未定义的值

Question

我正在映射一个称为Tours的数组

   export const tourData = [
  {
    id: 1,
    city: "new york",
    img: "./img/newyork.jpeg",
    name: "new york bridge tour",
    info:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel,repellendus!"
  },

如下所示

 state={
    tours: tourData
} 
 render(){
    const {tours} = this.state;

    return(
        <section className="tourlist">
          {tours.map(tour => {
              return (
                  <Tour key={tour.id} tour={tour} removeTour={this.removeTour}/>
              )
          })}
        </section>
    )
}

我将巡回演出作为道具传递给巡回演出组件。

const {id , city , img, name, info} = this.props.tour;
    const {removeTour} = this.props;

该webapp运行良好，但是当我对Tour组件进行测试并且我将值作为prop传递时

 const props ={
            id : 1,
            city: 'Test City ',
            img: 'Test img',
            name: 'Test name',
            info: 'Test Info'
        }

我收到类似的错误

无法读取未定义的属性“ id”

但是webapp可以正常运行。需要一些帮助，在此先感谢

Answer 1

在测试中将值传递给Tour组件的props时，您应该这样做

const props = {
  tour: {
    id : 1,
    city: 'Test City',
    img: 'Test img',
    name: 'Test name',
    info: 'Test Info'
  }
};

由于您的Tour组件内部是从中读取的this.props.tour。