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

Question

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

我还添加了浏览器外观和我的终端的图片。看起来我无法通过带有对象的数组进行映射，但我已经尝试过将对象更改为反应可读的内容，但都没有成功，所以我将向您展示我开始使用的代码。地址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())),
}
};

}

控制台登录终端：

浏览器：

Answer 1

您有一个嵌套的数组，因此需要使用嵌套的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>

Answer 2

解决后，我必须使用索引来指定我想要的数组.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())),
}
};

}