映射数组返回未定义的值

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 = {

  tour: {

    id : 1,

    city: 'Test City',

    img: 'Test img',

    name: 'Test name',

    info: 'Test Info'

  }

};

因为在您的 Tour 组件中，它正在从this.props.tour.