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

Posted 2023-02-22

【中文标题】如何访问子组件内部传递的prop数组

【英文标题】：How to access the passed prop array inside the child component

【发布时间】：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() 在哪里？

你是如何获取数据的？您如何在状态中存储数据？

【参考方案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)

之后添加了 name 属性

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

【参考方案3】：

在构造函数中包装状态

constructor()
  super();
  this.state = 
    venues : []
  ;

在 getVenues() 函数中使用设置场地

this.setState( venues: // the response from the third party API );

【参考方案4】：

错误表示您正在 DOM 中渲染一个对象，您不能这样做，您必须渲染对象的单个键或渲染多个键，您必须遍历键。

你的错误

首先，您没有以本地状态存储数据。使用this.setState(venues : [response array here])

其次，您应该在<li key=venue>item</li> 中定义场地对象的键，例如<li key=venue>item.key</li>