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

【问题标题】：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.

标签： javascript arrays reactjs object ecmascript-6

【解决方案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>

【讨论】：