如何多次渲染React組件，但是每次都具有更新的State？

Question

所以我正在做一個反應項目。 我有一個文本區域，在其中輸入數據，然后對該數據進行哈希處理，每當單擊按鈕時，就會在屏幕上顯示一個帶有Block號，哈希數據和時間的Block。 但是，當我再次輸入數據並再次按下按鈕時，它只是將塊重新渲染為塊編號2。每當我單擊按鈕時，都希望前一個塊保留在屏幕上，並且要在前一個塊下方顯示一個新塊。 我該如何解決？ 我已經嘗試了很多，但似乎沒有任何效果。 我正處於反應的學習階段，所以如果這個問題看起來微不足道，請原諒。

App.js

import React, {Component} from 'react';
import BlockList from './BlockList.js';
import InputText from './InputText.js';
import Button from './Button.js';

constructor() {
  super();
  console.log('constructor invoked')
  this.state = {
    blockno:0,
    Data:'',
    hash:'',
    showDiv: false

  }

onButtonClick = (event) => {
  console.log('onButtonClick invoked')
  this.setState({blockno: this.state.blockno + 1, showDiv: true})  
}

}

render() {

  return(
    <div>
<InputText onSearchChange={this.OnSearchChange}/>
<Button onButtonClick={this.onButtonClick} />
       {
          this.state.showDiv
          ?
            <div>

              <BlockList blockno={this.state.blockno} Data={this.state.Data} />

            </div>
          : ''          
        }



    </div>
    );
}

}

export default App;

Block.js

import React from 'react';
import SHA256 from 'sha256-es';

const Block = ({blockno,Data}) => {




        const hashdata = () =>{
            return(
                SHA256.hash(Data)
                );
            }
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();

today = mm + '/' + dd + '/' + yyyy;
return(
<div className="tc ws-pre">
    <h1 className="underline">Block {blockno}</h1>
    <h2>Data: {Data}</h2>
    <h2>Hash: {hashdata()}</h2>
    <h2>Date: {today}</h2>
</div>




        );


}

export default Block

BlockList.js

import React from 'react';
import Block from './Block.js';


const BlockList = ({blockno,Data,isBlockUpdated}) => {

    const BlockItems = () => {
        return(
            <div>
                {console.log('A block item is now returned')}
                <Block blockno={blockno} Data={Data} />
            </div>  
            );
    }

return(

<div>

    <BlockItems />


</div>

    );

}

export default BlockList

我想在每次單擊按鈕時在前一個塊下面顯示一個新塊。

Answer 1

我剛剛瀏覽了一下。 因此，每次在App.js中按下按鈕時， blockno在狀態中為blockno加1。 這只是一個數字，因此該數字僅被更新並傳遞到Block.js中

如果要顯示多個塊，則需要創建一個數組，可以對其進行迭代並為每個塊顯示一個Block組件。

本質上，您所處的狀態必須是這樣的：

blocks: [{ block data here }]

然后，onButtonClick需要向該數組添加一個對象。 然后，您可以將該數組向下傳遞到BlockList，並可以在那里進行迭代。

然后，BlockList看起來像這樣：

{blocks.map(block => (
  <Block data={block.data} />
))}

那有意義嗎？

Answer 2

作為DanBonehill的答案，您需要一個數組來存儲塊

App.js

constructor() {
  super();
  console.log('constructor invoked')
  this.state = {
    // To store the list of blocks
    blocks: [],

  }
}

onButtonClick = (event) => {
  console.log('onButtonClick invoked')
  let blocks = this.state.blocks

  // Create a new block with current data and time
  blocks.push({data: this.state.Data, time: Date.time()})
  this.setState({blocks})  
}

render() {
    // other stuff here
    {
          this.state.blocks.length > 0
          ?
            <div>
              <BlockList blocks={this.state.blocks} />
            </div>
          : ''          
        }
}

BlockList.js

const BlockList = ({blocks,Data,isBlockUpdated}) => {
    // other stuff here


    return(
        <div>
            {blocks.map((block, index) => <BlockItem {...block} blockno={index} />)}
        </div>
    );
}