Javascript 反应-。设置状态部分不工作_Javascript_Reactjs_Components_State

Javascript 反应-。设置状态部分不工作

javascript reactjs

Javascript 反应-。设置状态部分不工作,javascript,reactjs,components,state,Javascript,Reactjs,Components,State,我需要帮助更新React中的状态。我正在用React制作加密/解密表单。此加密表单在App.js中呈现。我想做的是听onSubmit函数并更新isSubmitted状态，然后在“Convert”按钮下呈现decipher值我的问题是为什么.setState在handleChange方法中有效，但在handleSubmit方法中无效。我缺少什么？（encryptMessage和decryptMessage方法工作正常。）这是EncryptForm组件代码 import React, { C

我需要帮助更新React中的状态。我正在用React制作加密/解密表单。此加密表单在App.js中呈现。我想做的是听

onSubmit

函数并更新isSubmitted状态，然后在“Convert”按钮下呈现

decipher

值

我的问题是为什么
.setState
在
handleChange
方法中有效，但在
handleSubmit
方法中无效。我缺少什么？（

encryptMessage

和

decryptMessage

方法工作正常。）

这是EncryptForm组件代码

import React, { Component } from 'react'
import crypto from 'crypto'

class EncryptForm extends Component {
    state = {
        userInput: '',
        isSubmitted: false,
        decipher: ''
    }

    encryptMessage(input, key) {
        // Initialization Vector - 16 bytes
        const iv = new Buffer(crypto.randomBytes(16), 'utf8')
        const cipher = crypto.createCipheriv('aes-256-gcm', key, iv)
        let encoded = cipher.update(input, 'utf8', 'base64')
        encoded += cipher.final('base64')
        return [encoded, iv, cipher.getAuthTag()]
    }

    decryptMessage(key, encoded, iv, authTag) {
        const decipher = crypto.createDecipheriv('aes-256-gcm', key, iv)
        decipher.setAuthTag(authTag)
        let text = decipher.update(encoded, 'base64', 'utf8')
        text += decipher.final('utf8')
        return text
    }

    /*
        Non-encryption methods
    */
    handleSubmit = event => {
        event.preventDefault()
        const KEY = new Buffer(crypto.randomBytes(32), 'utf8')
        const [encrypted, iv, authTag] = this.encryptMessage(this.state.userInput, KEY)
        const decrypted = this.decryptMessage(KEY, encrypted, iv, authTag)
        const newState = {
            ...this.state,
            isSubmitted: true,
            decipher: decrypted
        }

        // THIS IS NOW UPDATING THE STATE :(
        this.setState({ newState })
    }

    handleChange = event => {
        this.setState({
            [event.target.name]: event.target.value,
        })
    }

    render() {
        const { userInput, isSubmitted, decipher } = this.state
        const isInvalid = userInput === ''
        return (
            <form onSubmit={this.handleSubmit}>
                <input
                    type='text'
                    name='userInput'
                    placeholder='Encrypt this text...'
                    onChange={this.handleChange}
                />
                <button disabled={isInvalid} type='submit'>Convert</button>
                {isSubmitted && <p>{decipher.value}</p>}
            </form>
        )
    }
}

export default EncryptForm

import React，{Component}来自“React”
从“加密”导入加密
类EncryptForm扩展组件{
状态={
用户输入：“”，
提交的问题：错误，
解密程序：“”
}
加密消息（输入，密钥）{
//初始化向量-16字节
const iv=新缓冲区（加密随机字节（16），‘utf8’）
常量密码=crypto.createCipheriv（'aes-256-gcm'，密钥，iv）
let encoded=cipher.update（输入'utf8'，'base64'）
encoded+=cipher.final（'base64'）
返回[encoded，iv，cipher.getAuthTag（）]
}
解密消息（密钥、编码、iv、authTag）{
const decipher=crypto.createDecipheriv（'aes-256-gcm'，密钥，iv）
解密.setAuthTag（authTag）
让text=decipher.update（编码为'base64'，'utf8'）
text+=最终破译（'utf8'）
返回文本
}
/*
非加密方法
*/
handleSubmit=事件=>{
event.preventDefault（）
常量键=新缓冲区（加密随机字节（32），'utf8'）
const[encrypted，iv，authTag]=this.encryptermessage（this.state.userInput，KEY）
const decrypted=此.decryptMessage（密钥、加密、iv、authTag）
常数newState={
…这个州，
提交的问题：正确，
解密：解密
}
//现在正在更新状态：(
this.setState（{newState}）
}
handleChange=事件=>{
这是我的国家({
[event.target.name]：event.target.value，
})
}
render（）{
const{userInput，isSubmitted，decipher}=this.state
const isInvalid=userInput==''
返回(
转换
{isSubmitted&&{decipher.value}}
)
}
}
导出默认加密表单

谢谢！

您在

handleSubmit

中设置的状态不正确

newState

是整个state对象，因此将其设置为

this.setState（{newState}）

不是更新整个状态，而是创建一个名为

newState

的新键，并将其设置为您期望的状态。结果如下：

状态={
…以前的州，
新闻状态：{
…这个州，
提交的问题：正确，
解密：解密
},
}

相反，您可以执行以下操作以正确更新：

//取消结构，使其覆盖每个键
this.setState（{…newState}）；
//传递非嵌套对象
this.setState（newState）；

或者，首选的方法是只更新必要的键。

this.setState

与给定对象和以前的状态进行浅层合并。因此，您不需要执行

{…this.state}

（事实上，不建议这样做）

这是最简洁、最准确的方式：

this.setState（{isSubmitted:true，decipher:decrypted}）；

您在

handleSubmit