如何访问子组件内部传递的prop数组答案

【问题标题】：How to access the passed prop array inside the child component如何访问子组件内部传递的prop数组
【发布时间】：2019-12-08 20:38:53
【问题描述】：

我正在尝试将一组场所作为状态道具从父组件访问到子组件文件。数组 'Venues' 有一组属性，每个属性都像venue.name 和venue.location.address

我可以看到 prop 已成功传递，但是当我尝试映射数组（作为名称）时：它只显示数组中的项目数，并且在 div 'code' 中传递的数组本身为空。

import DropDown from './DropDown.js';

class App extends Component {

  state = {
    venues : []
  }

  componentDidMount() {
    this.getVenues()
  }

场地位置来自以下第三方 API

  getVenues = () => {
    const endPoint = "https://api.foursquare.com/v2/venues/explore?"
    const parameters = {
      client_id: "CFSJXP",
      query: "Outdoors & Recreation",
      near: "Singapore",
      v: "20200404"
    }
   })

  }

  render() {
    return (

               <DropDown dataFromApp = {this.state.venues} />

      )
  }
}

然后在组件文件中

  render () {
    return (

        <section>
          <h4>Location details</h4>
         ``` <div className='code'>
            {this.props.dataFromApp.map((item,venue) => <li key={venue}>{item}</li>)}
          </div> ```
        </section>
      </section>
    )
  }

当我尝试对数组进行字符串化时，会引发以下错误：

对象作为 React 子对象无效（找到：带键的对象 {reasons, 地点，referId}）。如果您打算渲染一组孩子，请使用而是一个数组。

如何将 prop 数据传递到 div 'code' 中，然后在侧边栏显示其数据？

【问题讨论】：

setState() 在哪里？
你是如何获取数据的？您如何在状态中存储数据？

标签： reactjs

【解决方案1】：

试试这个

 <div className='code'>
            {this.props.dataFromApp.map((item,venue) => <li key={venue}>{item.venue}</li>)}
 </div>

【讨论】：

他在li 值中使用item.venue 而不是item 进行了更改。
这个答案不是基于代码，而是一个假设

【解决方案2】：

问题只在这里，

{this.props.dataFromApp.map((item,venue) => <li key={venue}>{item}</li>)}

您正在直接尝试渲染item，它是object，而不是普通数据。

您的错误也说明了同样的情况，

（找到：带有键 {reasons、venue、referrId} 的对象）

表示item = {reasons="", venue="", referralId=""}

你必须这样做，

{this.props.dataFromApp.map(item => <li key={item.referralId}>{item.venue}</li>)}

【讨论】：

就是这样！非常感谢。只是在 item.venue {this.props.dataFromApp.map(item =>
{item.venue.name}

是的，这取决于您的数据结构。