当在承诺链末尾设置数组的状态时，对象作为 React 子对象无效

Question

我有一个创建数组的承诺链。在链的末尾，我想将该数组复制到我的一个状态变量中。但是，我得到"对象作为 React 子项无效"

我已经尝试了各种方法来链接承诺，以便状态变量捕获我要放入其中的数组。如果我把 setState 放在函数的末尾，它会错过我试图在承诺链中捕获的内容

addIPFSItem = () => {
   var finalItems = []
   var searchAddress = "0x9Cf0dc46F259542A966032c01DD30B8D1c310e05";
   const contract = require('truffle-contract')
   const simpleStorage = contract(SimpleStorageContract)
   simpleStorage.setProvider(this.state.web3.currentProvider)
   this.state.web3.eth.getAccounts((error, accounts) => {
     simpleStorage.deployed().then((instance) => {
       this.simpleStorageInstance = instance
       return this.simpleStorageInstance.getLength(searchAddress);
     }).then((accountLength) => {
        var movieItems = []

        var i;
       //WITHIN THIS LOOP extend the chain to add to movies
        for (i = 0; i < accountLength; i++) {
        var p = this.simpleStorageInstance.getBook(searchAddress, i, { from: searchAddress }).then((hashVal) => {
        return hashVal;
      })
      movieItems.push(p)
    }
    //return items
    return movieItems
  }).then((temp) =>{
    var i;
    var indexCounter=0;
    var arrayLength;
    arrayLength=temp.length
    for(i=0; i<arrayLength; i++){
      var p = temp[i].then((temp)=>{
        var ipfsPrefix = "https://ipfs.io/ipfs/";
        var ipfsURL = ipfsPrefix + temp;
        var movieItem = {id: indexCounter, poster_src: ipfsURL, title: "Some Title", overview: "blah blah"}
        indexCounter++
        return movieItem;
      }).then((item)=>{
        finalItems.push(item)
      }).then(()=>{
        if(finalItems.length == arrayLength ){
          //*******************************
          //Here is where I try to set state and get the error
          //*******************************
          this.setState({rows: finalItems})
        }
      })
    }
    return
  })
})
}

我希望我的状态中的row会改变，但我得到 对象作为 React 子项无效

更新：这是我的渲染（）函数

render() {
//Shows customer their account
var userAccount = "Your account is: " + this.state.account;
//Shows current IPFS _address
var currIPFS = "The IPFS address is: " + this.state.ipfsHash;

return (
  <div className="App">
    <table className="titleBar">
    <tbody>
      <h1>Interactive News</h1>
    </tbody>
    </table>
    <input style={{
      fontSize: 14,
      display: 'block',
      paddingTop: 8,
      paddingBottom: 8,
      paddingLeft: 14,
      width: "99%"
    }} onChange={this.searchChangeHandler} placeholder="Enter address for item lookup" />
 {this.state.rows}
    <main className="container">
      <div className="pure-g">
        <div className="pure-u-1-1">
          <h1>Your Image</h1>
          <p>This image is stored on IPFS & The Ethereum Blockchain!!!</p>
          <br />
          <font size="5">
          <span className="badge badge-info" dangerouslySetInnerHTML={{__html: userAccount}} />

          <br />
          <br />
          <span className="badge badge-light" dangerouslySetInnerHTML={{__html: currIPFS}} />
          <br />
          </font>
        <br />
        <br />
          <button onClick={this.addIPFSItem}
            className="btn btn-info btn-sm m-1">ShowList</button>

          <br />
          <br />
          <button onClick={this.handleFirst}
          className="btn btn-info btn-sm m-1">First</button>
          <button onClick={this.handleDecrement}
          className="btn btn-primary btn-sm m-1"> Prev </button>
          <font size="5">
          <span className="badge badge-success">
            {this.state.index}
          </span>
          </font>
          <button onClick={this.handleIncrement}
          className="btn btn-primary btn-sm m-1">Next</button>
          <button onClick={this.handleLast}
          className="btn btn-info btn-sm m-1">Last</button>
          <br/>

          <img src={`https://ipfs.io/ipfs/${this.state.ipfsHash}`} alt=""/>
          <h2>Upload Image</h2>
          <form onSubmit={this.onSubmit} >
            <input type='file' onChange={this.captureFile} />
            <input type='submit' />
          </form>
        </div>
      </div>
    </main>
  </div>
);
}

我不确定我的 render（） 函数是否可以。请注意，当我按下按钮 <button onClick={this.addIPFSItem} className="btn btn-info btn-sm m-1">ShowList</button> 时，这将调用 addIPFSItem() 函数。我不知道我是否需要componentDidMount()，因为它发生在初始渲染之后。

Answer 1

React 不能直接渲染对象。您需要将其作为 react DOM 组件返回。由于"this.state.rows"是一个对象数组，您需要遍历它并将每个对象包装在一个有意义的DOM组件中，例如。李或迪夫 ..

<ul>
{
 this.state.rows.map((row, index) => {
  return (
       <li key={index}>{row.title}</li>
   )
 })
}
</ul>

<main className="container">
      <div className="pure-g">