Reactjs 反应状态自动重置

我是React新手，我的React应用程序有问题。 我已经在stackoverflow和google上搜索了答案，但没有找到任何答案，也许你可以帮我

代码：

问题:

在函数

mineEvent（）

中，我使用“setState”函数，该函数在呈现所需状态一秒钟后更改类的状态，但随后页面将刷新到其初始状态

我试图调试整件事，但无法从中获得任何信息

也许你没有足够的信息来帮助我，请告诉我如何帮助你，你可以帮助我

---

问候

是的。这是天生的。当页面刷新时，状态将导致初始状态。如果要保持该状态，可以使用localStorage并在更新状态时从localStorage加载该状态，还可以更新到localStorage。

import React from“React”；
import React from "react";
import Sha256 from "./sha256";
import BlockchainElement from "./blockchainElement";

import Button from 'grommet/components/Button';


export default class blockchainElements extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            blockCounter: 0,
            blockchainElements: []
        }
        this.addBlockchainElement.bind(this);
        this.mineEvent.bind(this);
        this.mappingFunc.bind(this);
    }

    addBlockchainElement = () => {
        const blockchainElements = Object.assign([], this.state.blockchainElements);
        blockchainElements[blockchainElements.length] = { 
            id: this.state.blockCounter, 
            hashPrev: (this.state.blockCounter !== 0 ? this.state.blockchainElements[this.state.blockCounter-1].hashThis : "0000000000000000000000"), 
            data: {amount: 0, from: "", reciever: ""}, 
            hashThis: "", 
            nonce: 0,
            mined: false
        }
        this.setState({blockCounter: this.state.blockCounter + 1});
        this.setState({blockchainElements: blockchainElements});
        console.log(this.state.blockchainElements);
        debugger;
    }

    mineEvent = (index, e) => {
        const blockchainElements = Object.assign([], this.state.blockchainElements);
        while(blockchainElements[index].hashThis.substring(0, 4) !== "0000"){
            blockchainElements[index].nonce++;
            blockchainElements[index].hashThis = Sha256.hash(blockchainElements[index].id + 
                blockchainElements[index].data + 
                blockchainElements[index].hashPrev + 
                blockchainElements[index].nonce);
            this.setState({blockchainElements: blockchainElements});
        }
        blockchainElements[index].mined = true;
        this.setState({blockchainElements: blockchainElements});
    }

    mappingFunc = () => {
        return(
            this.state.blockchainElements.map((blockchainElement, id)=>{
                return(
                    <BlockchainElement
                    id={blockchainElement.id}
                    hashPrev={blockchainElement.hashPrev}
                    data={blockchainElement.data}
                    hashThis={blockchainElement.hashThis}
                    nonce={blockchainElement.nonce}
                    mineEvent={this.mineEvent.bind(this, id)}/>
                );
            })
        );
    }

    render(){
        return(
            <div>
                {this.mappingFunc()}
                <Button label='Add Block'
                    onClick={this.addBlockchainElement}
                    primary={true}
                    secondary={false}
                    accent={false}
                    plain={false}
                    critical={false}
                />
            </div>
        );
    }
}

从“/Sha256”导入Sha256；
从“/blockchainement”导入区块链元素；
从“索环/组件/按钮”导入按钮；
导出默认类blockchainElements扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
区块计数器：0，
区块链元素：[]
}
this.addBlockchainElement.bind（this）；
this.minevent.bind（this）；
this.mappingFunc.bind（this）；
}
addBlockchainElement=（）=>{
常量blockchainements=Object.assign（[]，this.state.blockchainements）；
blockchainElements[blockchainElements.length]={
id:this.state.blockCounter，
hashPrev:（this.state.blockCounter！==0？this.state.blockchainements[this.state.blockCounter-1]。hashThis:“0000000000000000000000”），
数据：{金额：0，发件人：，收件人：}，
hashThis:“，
零时:，
地雷：假的
}
this.setState（{blockCounter:this.state.blockCounter+1}）；
this.setState（{blockchainements:blockchainements}）；
console.log（this.state.blockchainElements）；
调试器；
}
mineEvent=（索引，e）=>{
常量blockchainements=Object.assign（[]，this.state.blockchainements）；
while（blockchainElements[index].hashThis.substring（0,4）！=“0000”）{
区块链元素[索引].nonce++；
区块链元素[index].hashThis=Sha256.hash（区块链元素[index].id+
区块链元素[索引]。数据+
区块链元素[index].hashPrev+
区块链元素[index].nonce）；
this.setState（{blockchainements:blockchainements}）；
}
区块链元素[index].mined=true；
this.setState（{blockchainements:blockchainements}）；
}
mappingFunc=（）=>{
返回(
this.state.blockchainements.map（（blockchainement，id）=>{
返回(
);
})
);
}
render（）{
返回(
{this.mappingFunc（）}
);
}
}

blockchainElement.js：

const blockchainElement = (props) => {
    return(
        <Box>
            <Form>
                <Header>
                    <Heading>
                        {props.id === 0 ? "Genesis-Block" : props.id}
                    </Heading>
                </Header>
                <FormFields>
                    <FormField label="Data">
                        <TextInput placeHolder="Amount of DATA" value={props.amount}/>
                        <TextInput placeHolder="From"/>
                        <TextInput placeHolder="Reciever"/>
                    </FormField>
                    <FormField label="Hashwert">
                        <div border="1px solid black" backgroundcolor="white">
                            {props.hashThis}
                        </div>
                    </FormField>
                    <FormField label="Hash zuvor">
                        <div border="1px solid black" backgroundcolor="white">
                            {props.hashPrev}
                        </div>
                    </FormField>
                    <FormField label="Nonce">
                        <div border="1px solid black" backgroundcolor="white">
                            {props.nonce}
                        </div>
                    </FormField>
                </FormFields>
                <Footer pad={{"vertical": "medium"}}>
                    <Button label='Mine'
                    type='submit'
                    primary={true}
                    onClick={props.mineEvent}/>
                </Footer>
            </Form>
        </Box>
    );
}
export default blockchainElement;

const区块链元素=（道具）=>{
返回(
{props.id==0？“Genesis Block”：props.id}
{props.hashThis}
{props.hashPrev}
{props.nonce}
);
}
导出默认区块链元素；

我进一步调试了这个函数。 在react-dom.development.js中执行此函数后，页面将刷新

function dispatchInteractiveEvent(topLevelType, nativeEvent) {
  interactiveUpdates(dispatchEvent, topLevelType, nativeEvent);
}

---

发生这种情况的原因是页面正在刷新，结果是状态正在重新加载，而不是重新呈现。这是因为您的按钮blockchainElement.js的类型为submit。默认情况下，“提交”将重新加载页面，因此您需要设置默认值

更改为以下代码以使其工作-->

{e.preventDefault（）；props.mineEvent（）；}}/>

---

这应该可以工作。

是否有不刷新页面的选项？否。用户仍然可以点击“刷新”。需要时，可以。如果他刷新页面，状态应该再次为inital。但在按下执行该功能的按钮后，它会在没有我或用户希望页面刷新的情况下刷新。您可以将该值存储在redux store中，而不必重新加载网页。您的意思是页面会在不重新加载网页的情况下刷新到初始阶段吗？@即使使用redux，也要三思，它将导致初始状态。@ZenOut是的，但刷新正在发生，我不想这样做that@MarkusFörstel您可以发布整个类，包括render吗？尝试放置console.log（…区块链元素）；在mineEvent中的每个设置状态上面，我想你在某种程度上使用了旧的状态，否则不知道：-/好的，所需的状态正在写入，但在ofc之后再次立即刷新。我将代码复制到我的机器上，它工作了，唯一需要更改的是Sha256.hash（到Sha256（由于我没有你的功能，我认为这个组件没有问题，请尝试将componentWillMount（）{console.log（'mount'）；}放入区块链元素中，并计数检查它在状态刷新后是否记录。它只在我第一次加载页面时，在刷新后吐出“mount”

function dispatchInteractiveEvent(topLevelType, nativeEvent) {
  interactiveUpdates(dispatchEvent, topLevelType, nativeEvent);
}

<Footer pad={{"vertical": "medium"}}>
                <Button label='Mine'
                type='submit'
                primary={true}
                onClick={e => {e.preventDefault();props.mineEvent();}}/>
 </Footer>