Question

所以我正在做一个React项目。我有一个文本区域，在其中输入数据，然后对该数据进行哈希处理，每当单击按钮时，就会在屏幕上显示一个带有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中加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>
    );
}

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

2 个答案: