Question

我是React的新手，我的React App有问题。我已经在stackoverflow和google上搜索了答案，但找不到任何答案，也许您可以帮助我。

代码：

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

    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});
    }

    otherfunctions(...);
}

blockchainElement:

    const blockchainElement = (props) => {
        return(HTML-Code);    
    }

问题：

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

我试图调试整个过程，但无法获得任何信息。

可能您没有帮助我的信息，请告诉我如何可以帮助您。

问候

Answer 1

是的。是天生的。刷新页面后，状态将进入初始状态。如果要保留状态，则可以使用localStorage并在更新状态时也可以从localStorage加载状态，也可以更新到localStorage。

Answer 2

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>
        );
    }
}

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;

Answer 3

我进一步调试，然后进入此功能。在react-dom.development.js中使用此功能后，页面将刷新。

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

Answer 4

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

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

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

这应该有效。

反应状态自动重置

4 个答案: