Javascript 如何多次渲染React组件，但每次都使用更新的状态？

所以我在做一个react项目。我有一个文本区域，在其中输入数据，然后对数据进行散列，每当单击按钮时，屏幕上就会呈现一个包含块号、散列数据和时间的块。但是，当我再次输入数据并再次按下按钮时，它只是将块重新命名为块号2。我希望上一个块保持在屏幕上，并在单击按钮时在上一个块下方渲染一个新块。我如何解决这个问题？我试了很多，但似乎什么都不管用。我正处于react的学习阶段，如果这个问题看起来很琐碎，请原谅

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;

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>
          : ''          
        }
}

import React，{Component}来自'React'；
从“./BlockList.js”导入区块列表；
从“./InputText.js”导入InputText；
从“./Button.js”导入按钮；
构造函数（）{
超级（）；
console.log（'调用了构造函数'）
此.state={
区块编号：0，
数据：“”，
散列：“”，
showDiv:错
}
onButtonClick=（事件）=>{
console.log（'onButtonClick invoked'）
this.setState（{blockno:this.state.blockno+1，showDiv:true}）
}
}
render（）{
返回(
{
this.state.showDiv
?
: ''          
}
);
}
}
导出默认应用程序；

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

从“React”导入React；
从“SHA256 es”导入SHA256；
常量块=（{blockno，Data}）=>{
常量hashdata=（）=>{
返回(
SHA256.hash（数据）
);
}
var today=新日期（）；
var dd=String（today.getDate（））.padStart（2，'0'）；
var mm=String（today.getMonth（）+1）.padStart（2，'0'）；//一月是0！
var yyyy=today.getFullYear（）；
今天=mm+'/'+dd+'/'+yyyy；
返回(
块{blockno}
数据：{Data}
哈希：{hashdata（）}
日期：{今天}
);
}
导出默认块

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

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


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

从“React”导入React；
从“/Block.js”导入块；
常量块列表=（{blockno，Data，isBlockUpdated}）=>{
常量块项=（）=>{
返回(
{console.log（'现在返回一个块项'）}
);
}
返回(
);
}
导出默认阻止列表

---

每次单击按钮时，我都想在上一个块的下方显示一个新块。

我刚刚快速浏览了一下。因此，每次按下App.js中的按钮，都会在状态中向

blockno

添加1。这只是一个数字，所以这个数字只是被更新并传递到Block.js中

如果要显示多个块，则需要创建一个可以迭代的数组，并为每个块显示一个块组件

本质上，你的状态应该是这样的：

blocks: [{ block data here }]

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

onButtonClick然后需要向该数组添加一个对象。然后您可以将该数组向下传递到BlockList，并在那里进行迭代

区块列表的外观如下所示：

blocks: [{ block data here }]

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

{blocks.map（block=>(
))}

---

这有意义吗？

我刚刚浏览了一下。因此，每次按下App.js中的按钮，都会在状态中向

blockno

添加1。这只是一个数字，所以这个数字只是被更新并传递到Block.js中

如果要显示多个块，则需要创建一个可以迭代的数组，并为每个块显示一个块组件

本质上，你的状态应该是这样的：

blocks: [{ block data here }]

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

onButtonClick然后需要向该数组添加一个对象。然后您可以将该数组向下传递到BlockList，并在那里进行迭代

区块列表的外观如下所示：

blocks: [{ block data here }]

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

{blocks.map（block=>(
))}

---

这有意义吗？

正如DanBonehill的回答，您需要一个数组来存储块

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;

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>
          : ''          
        }
}

constructor（）{
超级（）；
console.log（'调用了构造函数'）
此.state={
//存储块列表的步骤
区块：[]，
}
}
onButtonClick=（事件）=>{
console.log（'onButtonClick invoked'）
设blocks=this.state.blocks
//使用当前数据和时间创建新块
blocks.push（{data:this.state.data，time:Date.time（）}）
this.setState（{blocks}）
}
render（）{
//这里还有其他东西
{
this.state.blocks.length>0
?
: ''          
}
}

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

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


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

const BlockList=（{blocks，Data，isBlockUpdated}）=>{
//这里还有其他东西
返回(
{blocks.map（（块，索引）=>）}
);
}

正如DanBonehill的回答，您需要一个数组来存储块

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;

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>
          : ''          
        }
}

constructor（）{
超级（）；
console.log（'调用了构造函数'）
此.state={
//存储块列表的步骤
区块：[]，
}
}
onButtonClick=（事件）=>{
console.log（'onButtonClick invoked'）
设blocks=this.state.blocks
//使用当前数据和时间创建新块
blocks.push（{data:this.state.data，time:Date.time（）}）
this.setState（{blocks}）
}
render（）{
//这里还有其他东西
{
this.state.blocks.length>0
?
: ''          
}
}

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

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


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

const BlockList=（{blocks，Data，isBlockUpdated}）=>{
//这里还有其他东西
返回(
{blocks.map（（块，索引）=>）}
);
}

您的

区块列表实际上只有一个区块。我现在没有时间找出并键入完整的工作代码段，但您需要做的是将一个块ID数组传递给该组件（并在每次适当的操作发生时添加到该组件），并在其上映射

以呈现多个

块

组件。您的

块列表实际上只有一个块。我现在没有时间找出并键入完整的工作代码