映射動態數組從智能合約起反應，其值包括地址和字符串

Question

我正在嘗試從地址映射一個動態數組，其中包含一個地址和一個字符串，以作出反應，使其看起來像一個表，或者在列表中打印出地址和字符串，但是我無法設法將這兩個值分開。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Data: []
    };
  }

  GetData = async () => {
    const { accounts, contract, count, Data } = this.state;
    const data = [];
    for (var i = 0; i < count.length; i++) {
      const dataa = await contract.methods.getInfo(i).call();
      data.push(dataa);
    }
    console.log(data);
    this.setState({ Data: JSON.stringify(data) });
  };

  render() {
    return (
      <>
        <button onClick={this.GetData}>Show</button>
        <h1>{this.state.Data}</h1>
      </>
    );
  }
}
export default App;

這是我的控制台打印的內容，它將網站中的數據顯示為0:<address> 1: <string>

(2) [Result, Result]
0: Result
0: "0x7e3ce0fc8F95Bb83A4f5131912DacBFf11B9d4f8"
1: "{test1}"
__proto__: Object
1: Result {0: "0x514bdB4F417926027dDa4f0ccb2a6674a31D4BcB", 1: "{test2"}
length: 2
__proto__: Array(0)

Answer 1

stringify之前，請嘗試分離。 其實，為什么要嚴格分類呢？

應該這樣做：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Data: []
    };
  }

  GetData = async () => {
    const { accounts, contract, count, Data } = this.state;
    const data = [];
    for (var i = 0; i < count.length; i++) {
      const dataa = await contract.methods.getInfo(i).call();
      data.push(dataa);
    }
    console.log(data);
    this.setState({ Data: data });
  };

  render() {
    return (
      <>
        <button onClick={this.GetData}>Show</button>
         { this.state.Data.map(item => <h1>{item.toString()}</h1>) }

      </>
    );
  }
}
export default App;