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;

映射动态数组从智能合约起反应，其值包括地址和字符串

1 个答案: