映射数组返回未定义的值

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>

    )

}

我将游览作为道具传递到 Tour 组件中。

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

    const {removeTour} = this.props;

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

 const props ={

            id : 1,

            city: 'Test City ',

            img: 'Test img',

            name: 'Test name',

            info: 'Test Info'

        }

我得到了这样的错误

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

但 webapp 工作正常。需要一些帮助，提前致谢

Answer 1

在测试中将值传递给 Tour 组件的道具时，您应该执行以下操作const props = {&nbsp; tour: {&nbsp; &nbsp; id : 1,&nbsp; &nbsp; city: 'Test City',&nbsp; &nbsp; img: 'Test img',&nbsp; &nbsp; name: 'Test name',&nbsp; &nbsp; info: 'Test Info'&nbsp; }};因为在您的 Tour 组件中，它正在从this.props.tour.