.map() 通过 next.js 中的对象数组不显示在 html 中，而是显示在控制台中？

Question

我无法在 html 中显示此数组的元素。我正在从 Bscscan api 获取数据。我可以从第一个 api 中完美获取，但第二个不在本地浏览器中显示数据。我会告诉你我所有的代码。

我还添加了浏览器外观和我的终端的图片。看起来我无法通过数组映射对象，但我已经尝试了所有将对象更改为 React 可读内容的方法，但没有任何效果，所以我将向您展示我开始使用的代码。地址2为问题地址

代码：

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import React from 'react'


export default function Home(props) {



  const datatransone  =  props.addresstransaction;
  const databalone = props.addressbalance;

  //something wrong with stringify
  // const datatransone = JSON.stringify(datatransjson);

  console.log(databalone);
  console.log(datatransone);

  return  (
    <ul>      
      <h1>Address One</h1>
      {databalone.map((balance) => {
        return (
      <li>{(balance.result * 1e-18).toString()}</li>
      )})}
      <div>
      <h1>Address Two</h1>
      <div>
      {datatransone.map(function(d){
         return (<li key={d.hash}>{d.result.hash}</li>)
       })}
      </div>
      </div>
    </ul>
  );
}


export async function getServerSideProps(context) {

    let wlunarush = ['0xb4e856c2a257457b862daed14967578bbdba3526', '0x52ab04656c807a3af96f98e4428291e813c2687a'];
    // let contractaddress = '0xde301D6a2569aEfcFe271B9d98f318BAee1D30a4';
  

    let balance = wlunarush.map(function(element){

      let bscbalance = 'https://api-testnet.bscscan.com/api?module=account&action=tokenbalance&contractaddress=0x0DBfd812Db3c979a80522A3e9296f9a4cc1f5045&address=' + element + '&tag=latest&apikey=E2JAJX6MAGAZUHSYIBZIEMKMNW9NZKPR7I';

    return bscbalance;
  })

    let transaction = wlunarush.map(function(element){

      let bsctransaction = 'https://api-testnet.bscscan.com/api?module=account&action=tokentx&contractaddress=0x0DBfd812Db3c979a80522A3e9296f9a4cc1f5045&address=' + element + '&page=1&startblock=0&offset=1&endblock=999999999&sort=asc&apikey=E2JAJX6MAGAZUHSYIBZIEMKMNW9NZKPR7I';

    return bsctransaction;
  })



    const addressbalance = await Promise.all(balance.map(u => fetch(u)))
    const addresstransaction = await Promise.all(transaction.map(e => fetch(e)))


  // console.log(bscbalancelist)
  // console.log(bscbalancelist);
  // const responsesec = await fetch(transaction);
  // const bscbalancelist = await bscbalone.json();


  return {
    props: {
      addressbalance:  await Promise.all(addressbalance.map(r => r.json())),
      addresstransaction:  await Promise.all(addresstransaction.map(p => p.json())),
    }
  };


}

Console.log in Terminal :

Browser :

Answer 1

解决了，我不得不使用索引来指定我想要的数组.map()。

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import React from 'react'


export default function Home(props) {



  const datatransone  =  props.addresstransaction;
  const databalone = props.addressbalance;

  var transactionarray = datatransone[0];
  // var newgotwo = datatransone[1];




  // console.log(databalone);
  // console.log(datatransone);

  return  (
    <ul>      
      <h1>Address One</h1>
      {databalone.map((balance) => {
        return (
      <li>{(balance.result * 1e-18).toString()}</li>
      )})}
      <div>
      <h1>Address Two</h1>
      <div>
        {transactionarray.result.map(function(d){
         return (<li key={d.hash}>{d.hash}</li>)
       })}
        {/* {newgotwo.result.map(function(d){
         return (<li key={d.hash}>{d.hash}</li>)
       })} */}
      </div>
      </div>
    </ul>
  );
}


export async function getServerSideProps(context) {

    let wlunarush = ['0xb4e856c2a257457b862daed14967578bbdba3526', '0x52ab04656c807a3af96f98e4428291e813c2687a'];
    // let contractaddress = '0xde301D6a2569aEfcFe271B9d98f318BAee1D30a4';
  

    let balance = wlunarush.map(function(element){

      let bscbalance = 'https://api-testnet.bscscan.com/api?module=account&action=tokenbalance&contractaddress=0x0DBfd812Db3c979a80522A3e9296f9a4cc1f5045&address=' + element + '&tag=latest&apikey=E2JAJX6MAGAZUHSYIBZIEMKMNW9NZKPR7I';

    return bscbalance;
  })

    let transaction = wlunarush.map(function(element){

      let bsctransaction = 'https://api-testnet.bscscan.com/api?module=account&action=tokentx&contractaddress=0x0DBfd812Db3c979a80522A3e9296f9a4cc1f5045&address=' + element + '&page=1&startblock=0&offset=1&endblock=999999999&sort=asc&apikey=E2JAJX6MAGAZUHSYIBZIEMKMNW9NZKPR7I';

    return bsctransaction;
  })



    const addressbalance = await Promise.all(balance.map(u => fetch(u)))
    const addresstransaction = await Promise.all(transaction.map(e => fetch(e)))


  // console.log(addresstransaction)
  // console.log(addressbalance);
  // const responsesec = await fetch(transaction);
  // const bscbalancelist = await bscbalone.json();


  return {
    props: {
      addressbalance:  await Promise.all(addressbalance.map(r => r.json())),
      addresstransaction:  await Promise.all(addresstransaction.map(p => p.json())),
    }
  };


}

Answer 2

您有一个嵌套数组，因此您需要使用嵌套 map 来遍历所有项。

我做了一些简化，但您应该能够理解并调整它以满足您的确切需求。

function Home() {

  const databalone = [{status: '1', message: 'OK', result: '1234'},{status: '1', message: 'OK', result: '1234'}];
  const datatransone = [{status: '1', message: 'OK', result: [{hash: '4321'}]},{status: '1', message: 'OK', result: [{hash: '54321'}]}];

  return  (
    <ul>      
      <h1>Address One</h1>
      {databalone.map((balance) => {
        return (
      <li>{(balance.result * 1e-18).toString()}</li>
      )})}
      <div>
      <h1>Address Two</h1>
      <div>
      {datatransone.map(function(d){
         return (<li>{d.result.map((r) => <span>{r.hash}</span>)}</li>)
       })}
      </div>
      </div>
    </ul>
  );
}

ReactDOM.render(<Home />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

.map() 通过 next.js 中的对象数组不显示在 html 中，而是显示在控制台中？

.map() through array of object in next.js does not display in html but in console?

javascript

reactjs

next.js