Question

这是我的反应组件：

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。请帮助打印数据。

Answer 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>
);

Answer 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>

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

2 个答案: