Javascript 反应状态更新

我从用户那里获取输入，并检查它是否为正确的json格式，逻辑是否工作正常。。 如果用户正确输入正确的格式或连续输入错误的格式，则会出现错误。。我的逻辑不起作用，因为我正在用not运算符更新我的状态。我尝试使用componentWillMount（）更新值，但这也不起作用…请提供任何帮助。。 以下是我的代码：-

import React from 'react'
import { Container, Segment, Icon, Form, TextArea, Button } from 'semantic-ui-react'
import './App.css'
import PrettyPrint from './PrettyPrint'
import JSON_Text from './Json_Template_Text'
import './Button.scss'
import Upload from './Upload'
import Failure from './Failure'

class jsonText extends React.Component{

    state = {
        text: '',
        flag_button: false,
        flag_fail : false
    }


    onChangeHandler = (event) => {
        this.setState({ text : event.target.value })
    }


    onSubmitHandler = () => {
        const json = this.state.text;
        if(this.IsJsonString(json))
            this.setState({ flag_button : !this.state.flag_button })
        else
            this.setState({ flag_fail : !this.state.flag_fail })
    }


    IsJsonString(str) {
        try {
            JSON.parse(str);
        } catch (e) {
            return false;
        }
        return true;
    }


    render(){

    return(

       <Container style = {content}>
           <Segment style = {segment}>
               <div style = {info}>
                    <div><Icon name = "lightbulb" size = "large" style = {icon} /></div>
                    <div style = {info_div} ><p style = {text}><strong>You may be wondering what is the format of the JSON !! <br />Well, we have got you covered..</strong></p></div>
               </div>
                 <center>

                    <div className = "json_example">
                        <PrettyPrint data = {JSON_Text} />
                    </div>
                    <div id="blank"></div>
                    <div id="blank"></div>

                    <div><p style = {text}><strong>Validate Your JSON Here..</strong></p></div>
                    <div id="blank"></div>


                        <Form onSubmit = {this.onSubmitHandler}>

                            <div className = "json_example" style = {form}>
                                <TextArea style={ TextCover } onBlur = {this.onChangeHandler} />
                            </div>

                            <div id="blank"></div><div id="blank"></div><div id="blank"></div><div id="blank"></div>


                            <Button className="button">
                                Submit
                                <div className="button__horizontal"></div>
                                <div className="button__vertical"></div>
                            </Button>  
                            {this.state.flag_button && <Upload />}
                            {this.state.flag_fail && <Failure />}

                        </Form>

                </center>

           </Segment>
       </Container> 
    )
  }
}

export default jsonText;

从“React”导入React
从“语义ui反应”导入{容器、段、图标、窗体、文本区域、按钮}
导入“./App.css”
从“./PrettyPrint”导入预打印
从“./JSON_模板_文本”导入JSON_文本
导入“./Button.scss”
从“./Upload”导入上载
从“./失败”导入失败
类jsonText扩展了React.Component{
状态={
文本：“”，
flag_按钮：false，
flag_失败：false
}
onChangeHandler=（事件）=>{
this.setState（{text:event.target.value}）
}
onSubmitHandler=（）=>{
const json=this.state.text；
if（this.IsJsonString（json））
this.setState（{flag_button:！this.state.flag_button}）
其他的
this.setState（{flag_fail:！this.state.flag_fail}）
}
IsJsonString（str）{
试一试{
JSON.parse（str）；
}捕获（e）{
返回false；
}
返回true；
}
render（）{
返回(
您可能想知道JSON的格式是什么！！
好了，我们已经介绍了您。
在此处验证JSON。
提交
{this.state.flag_按钮&&}
{this.state.flag_fail&&}
)
}
}
导出默认jsonText；

您无需使用组件willmount。此外，API在最新版本中已被弃用

在更新状态时，您需要直接设置

flag\u fail

和

flag\u按钮

状态，而不是像下面那样切换它们

onSubmitHandler = () => {
    const json = this.state.text;
    if(this.IsJsonString(json))
        this.setState({ flag_button : true, flag_fail: false })
    else
        this.setState({ flag_fail : true, flag_button: false })
}

---

非常感谢你的帮助1.成功了