返回 React 状态数组映射值

Question

我正在创建一个使用 Solidity、Web3 和 React 的 webapp。我的问题是我的智能合约中有一个函数可以在用户从表单提交的索引处返回两个不同的数组。目前我已经能够将合约方法调用的两个结果保存到一个有两个数组的状态变量中。

状态构造函数

constructor(props){
super(props);
this.state = {
arrHash: [{
  arrName: []
  arrHVal: [] 
}]};
};

获取数组函数

getArray = (event) => {
  event.preventDefault()
  const amt = this.state.totalImgs
  for (var i=0; i < amt; i++){
    this.state.contract.methods.getImgHash(0).call().then((res) => {
     var a = res[0];
     var b = res[1];
      this.setState(prevState => ({
        arrHash: [{
          ...prevState.arrHash[0],
          arrHVal: [...prevState.arrHash[0].arrHVal, b],
          arrName: [...prevState.arrHash[0].arrName, a]
        }],
      }));
      console.log("Val " + this.state.arrHash[0].arrHVal);
      console.log("Name " + this.state.arrHash[0].arrName);
    })
    console.log(this.state.contract.methods.getImgHash(0).call());
  }
}

渲染

 render() {
    return (
      <Button onClick={this.getArray} variant='dark'>get array</Button>
      <table>
         <tr>
           <th>Name</th>
           <th>Hash</th>
         </tr>
         {this.state.arrHash.map((item, index) => (
           <tr key={index}>
             <td>{item.arrName}</td>
             <td>{item.arrHval}</td>
           </tr>
          ))}
      </table>

我的合同有以下设置：

uint public numHashes;
string [] public ImageHashes;
string [] public ImageName;


function setImgHash(string memory _imgHash, string memory _imgName) public {
        ImageHashes.push(_imgHash);
        ImageName.push(_imgName);
        numHashes = ImageHashes.length;
}

function getImgHash(uint _index) public view returns(string memory, string memory) {
        return (ImageName[_index], ImageHashes[_index]); 
}

根据我收集到的信息，我可以通过控制台记录数组的状态，但是在映射它时，问题就出在哪里。谢谢！

编辑：

const amt = this.state.totalImgs 是从智能合约中获取计数的状态。

编辑 2： this.state.contract 方法中的 0 纯粹是为了返回一行，但我也有兴趣循环遍历数组以显示项目。

Answer 1

根据您的评论，我相信您有一个包含另外 2 个数组的数组，您需要遍历这些数组以显示其值。目前你只迭代外部数组。 如果可行，请尝试以下代码：

export default function App() {
  const arrHash = [{
    arrName: ["first img", "testing second image"],
    arrHVal: ["QmPYbXPTt8urjQ7NxH6gcSTqasvopUHcHG94CvZw2BWPVX","Qmb4DXQ1ZgQPVda62gU698a57d6CriE7WH5Re3rRJ6ez6T"] 
  }];
  return (
    <div>
      <table border="1px solid black">
         <tr>
           <th>Name</th>
           <th>Hash</th>
         </tr>
         {Object.keys(arrHash).map((item, index) => (
           arrHash[index].arrName.map((el,i) => (
           <tr key={index}>
             <td>{el}</td>
             <td>{arrHash[index].arrHVal[i]}</td>
           </tr>

           ))
          ))}
      </table>
    </div>
  );
}

如果您的 arrHash 数组与我的不相似，请纠正我。