【问题标题】:How to print array of object in react如何在反应中打印对象数组
【发布时间】:2018-04-19 10:42:01
【问题描述】:

我有下面的代码

  1. 从'react'导入反应,{组件}; 从'../ethereum/factory'导入工厂;

    import ads_list from './ads_list'
    
    class showAds extends Component {
      static async getInitialProps(){
        let i;
        let a = [];
        const ad=await factory.methods.getAdress().call();
        const unique_address = Array.from(new Set(ad));
        for ( i = 0 ;i < unique_address.length;i++){
           a[i] = await factory.methods.getClientData(unique_address[i]).call();
        }
       console.log(a);
       return {a};
     }
    
     render(){
        return <div>
                 <p>{}</p>
              </div>;
        }
     }
    
     export default showAds;
    

对于上面的代码,我在控制台中得到了以下值。

   [ 
      {
        '0': 'www.google.com', 
        '1': 'Click here and enjoy searching', 
        '2': '17' 
      },
      { 
        '0': 'www.gmail.com', 
        '1': 'PLease login here', 
        '2': '2' 
      } 
      { 
       '0': 'www.google.com',
       '1': 'Click here and enjoy searching',
       '2': '17' 
      },
      { 
       '0': 'www.gmail.com',
       '1': 'PLease login here', 
       '2': '2' 
      } 
    ]

我面临的问题是在前端打印这些值。

【问题讨论】:

  • 您能否提供正确的数据,因为您提到的数组无效
  • 你可以使用这个简单的react组件data =&gt; &lt;pre&gt;{JSON.stringify(data, null, 2)}&lt;/pre&gt;developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
  • 您要一起打印还是单独打印?
  • 是你的数据类似于这个对象和它的数组"Result" : [ {'0': 'www.google.com'}, {'1': 'Click here and enjoy searching'}, {'2': '17'} ]
  • OP,你试过什么?您在显示数据时遇到了哪些具体问题?这个问题听起来几乎就像你在问如何使用 React

标签: reactjs


【解决方案1】:

以更简单的data 为例,您可以像这样呈现一个无序列表:

class App extends React.Component {
  render() {
    const data = [
      {
        "0": "www.google.com",
        "1": "Click here and enjoy searching",
        "2": "17"
      },
    ];

    return (
      <ul>
        {data.map(item => {
          return <li>{item[0]}</li>;
        })}
      </ul>
    );
  }
}

此处为 CodeSandbox 示例:https://codesandbox.io/s/j3y3q9pwr3

【讨论】:

    【解决方案2】:
    JSON.stringify(["a", { b: "c" }])
    

    查看demo。

    【讨论】:

      猜你喜欢
      • 2023-01-10
      • 1970-01-01
      • 1970-01-01
      • 2022-10-22
      • 1970-01-01
      • 2012-05-01
      • 1970-01-01
      • 1970-01-01
      • 2019-09-03
      相关资源
      最近更新 更多