如何在反应组件中打印道具数据？

Posted 2023-02-22

【中文标题】如何在反应组件中打印道具数据？

【英文标题】：How to print props data in react component?

【发布时间】：2019-09-03 23:52:25

【问题描述】：

这是我的反应组件：

import React from 'react';
import  promised  from 'q';

const Trending = (props) => 
    console.log(props.data);


    return (
        <div>
        //code to print

        </div>
    ) 


export default Trending;

我正在控制台日志中获取我的数据。

(10) […, …, …, …, …, …, …, …, …, …]
0:
db_frequency: 17
db_keyword: "modi"
__proto__: Object
1: db_keyword: "gandhi", db_frequency: 14
2: db_keyword: "ipl", db_frequency: 10
3: db_keyword: "election", db_frequency: 18
4: db_keyword: "vote", db_frequency: 7
5: db_keyword: "upsc", db_frequency: 11
6: db_keyword: "dhoni", db_frequency: 6
7: db_keyword: "ranveer", db_frequency: 7
8: db_keyword: "pollution", db_frequency: 2
9: db_keyword: "unemployment", db_frequency: 1
length: 10
__proto__: Array(0)

我想在我的 html 页面中打印所有 db_keyword 和 db_frequency。请帮助打印数据。

【问题讨论】：

React.js create loop through Array 的可能重复项。另外，docs.

【参考方案1】：

像这样使用map：

return (
    <div>
        <ul>
            props.data.map(( db_keyword, db_frequency , index) => <li key=index>Keyword: db_keyword, Frequency: db_frequency</li>)
        </ul>
    </div>
);

【讨论】：

你忘记添加 key 属性了。

@julekgwa 你什么意思？

非常感谢大家。 @JackBashford 代码正在运行。

@JackBashford react 将在控制台中抛出 Each child in an array or iterator should have a unique "key" prop. 警告。

“键”是创建元素列表时需要包含的特殊字符串属性。键帮助 React 识别哪些项目已更改、添加或删除。应为数组内的元素提供键，以使元素具有稳定的身份。 reactjs.org/docs/lists-and-keys.html#keys

【参考方案2】：

使用map 循环遍历项目，并返回您想要的元素，例如<div>、<h1>等

return (<div>
  <ul>
    props.data.map((item, i) => <li key=i>`Keyword: $item.db_keyword, Frequency: $item.db_frequency`</li>)
  </ul>
</div>