映射动态数组以从具有值地址和字符串的智能合约做出反应

Question

我正在尝试用一个地址和一个字符串映射一个动态数组，使其看起来像 table 或在列表中打印出地址和字符串，但我无法分开这 2 个值。

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;

映射动态数组以从具有值地址和字符串的智能合约做出反应

map dynamic array in react from a smart contract with values an address and a string

javascript

arrays

reactjs

solidity