【问题标题】:Accessing prop of dynamically created component访问动态创建的组件的 prop
【发布时间】:2019-11-22 18:40:48
【问题描述】:

我是新来的反应,自学,并且正在从事一个尝试学习的个人项目。

我目前正在尝试制作一个动态生成的元素,该元素可以根据已加载到元素中的数据来加载不同的用户配置文件。例如:

搜索 1 个结果返回:

用户 1 -(点击加载用户 1 的个人资料)

用户 3 -(点击加载用户 3 的个人资料)

用户 5 -(点击加载用户 5 的个人资料)


此数据已从已映射以返回搜索结果的 json 文件中的对象访问

目前我已将数据映射到元素并且可以正常工作,但是当我尝试将 ID 或名称变量映射到属性然后通过 console.log 访问它时,它返回未定义。

我使用 Native Base 进行样式设置,因此元素名称:

<Content>
  {this.searchedArray.map(user =>
     <TouchableHighlight key = {user.ID} name = {user.ID} onPress = {() => {console.log(this.props.name)}} >

                       <Card style={{height: 130}}>
                            <Grid>
                                <Row>
                                <Col>
                                    <Image style={{width: 100, height: 100}} source = {{uri: user.photoID}}/>
                                </Col>
                                <Col>
                                <Text>{user.fullName}</Text>
                                </Col>
                                </Row>
                            </Grid>
                        </Card>
                    </TouchableHighlight>
                )}
            </Content>

我希望 console.log 的输出是 user.ID 值。这个不行,我也试过了:console.log(user.ID)

但是地图功能完美运行,如果我将&lt;Text&gt;{user.fullName}&lt;/Text&gt; 替换为&lt;Text&gt;{user.ID}&lt;/Text&gt;,它会显示在这里。

谁能给我一些关于这个问题的指导,这让我很难过。

【问题讨论】:

  • 而不是从 this.props 访问它,而是在迭代 searchedArray console.log(user.ID) 时捕获 ID
  • 谢谢@AsafAviv,但问题是抓取的道具数据将被传递给另一个函数以加载应用程序的另一部分。所以它需要在媒体上可以访问。不过,我非常感谢答案的快速响应。
  • 您可以将 prop ID 传递给您要渲染的组件,并在 componentDidMount 上从数组中获取数据并将其保存为状态或将其传递给需要数据的任何组件
  • @AsafAviv 我解决了这个问题,你原来是对的。我的问题是整个数据库将 ID 保存为 Id 并且我完全错过了它,我想我盯着这个问题太久了。感谢您的帮助,您的方法非常有效。
  • 不客气,很高兴你把它整理好了。

标签: javascript reactjs react-native


【解决方案1】:

尝试添加这个:

onClick={() => {console.log(user.ID)}}

【讨论】:

  • 感谢您对 Hamza 的回复,但这不是我想要的,因为您无法添加必须为 onPress 的 onClick 事件。我也尝试过这种确切的方法,但感谢您抽出宝贵时间回复。
  • 正如我在上面的 cmets 中所说的,我意识到我犯了错误,而且效果很好。感谢您抽出宝贵时间回答这个问题!
猜你喜欢
  • 2021-02-23
  • 2021-08-31
  • 1970-01-01
  • 1970-01-01
  • 2011-02-28
  • 2021-08-17
  • 2021-08-01
  • 1970-01-01
  • 2019-07-10
相关资源
最近更新 更多