访问对象的字段

Question

我是 React 新手，出于学习目的，我正在尝试创建一个应用程序，但是在编译代码时出现错误 TypeError：无法读取未定义的属性“状态”。 有人可以帮助我如何访问对象字段以进行比较。 我遇到错误：if(this.state.planType==='prepaid') 如何访问/获取计划对象的“planType”的值？

登录.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Navbar,Nav } from 'react-bootstrap';
import axios from 'axios';


class Login extends React.Component{
    constructor(){
        super();
        this.state={plan:{id:'',planType:'',data:'',minData:'',maxData:'',calls:''},
        message:'',errorMessage:'',isChecked:''}
    }
    handelChange=(e)=>{
        e.preventDefault();
        let {state:fieldName,value}=e.target
        this.setState({[fieldName]:value})
       }
    handelPtype=(e)=>{
       
       axios.get('plan.json')
        .then(response=>{
            this.setState({plan:response.data})
            console.log(response.data)
        })
        this.setState({planType:e.target.value});
     
      }
   
    validate(e){
        e.preventDefault();
       if(this.state.planType==='prepaid'){
           if(this.state.data>this.state.minData)
           {
               this.setState({errorMessage:"Data should be less than 20 Gigs"})
           }
           
           }
       }

render(){
    return(<React.Fragment>

        <Navbar className="mr-auto" bg="primary" variant="dark">
            <Navbar.Brand>XYZ Telecom</Navbar.Brand>
            <Nav className="text text-white">Add Plan</Nav>
            <Nav className="text text-white">Show Plan</Nav>
        </Navbar>
        <form onSubmit={this.validate} className="form" style={{border:"1px solid black", width:"50%",marginLeft:"250px",marginTop:"100px"}}>
            <h1 style={{backgroundColor:"lightblue"}}>Plans</h1>
            <div className="form-group form-inline">
            <label>Plan Type&nbsp;
                <input type="radio" value="prepaid" onChange={this.handelPtype} checked={this.state.planType==="prepaid"} className="form-control"/>Prepaid &nbsp;
                <input type="radio" value="postpaid" onChange={this.handelPtype} checked={this.state.planType==="postpaid"} className="form-control"/>Postpaid
             </label>
            </div>
            <div className="form-group"> <label>
                Plan Data</label>&nbsp;
                
                <input type="text" className="form-control" value={this.state.data} onChange={this.handelChange} name="data"/></div>
                {this.state.errorMessage}
             <div className="form-group">
            <label>Calls</label>
            <input type="text" value={this.state.calls} onChange={this.handelChange} className="form-control" name="calls"/><br/></div>
<button type="submit" onClick={this.validate} className="btn btn-primary">Set Plan</button>
 </form>
    </React.Fragment>)
}
}
export default Login;
   

计划.json

[{"id":"1","planType":"postpaid","data":"200","minData":"20","maxData":"200","calls":"500"},
    {"id":"2","planType":"prepaid","data":"300","minData":"20","maxData":"200","calls":"500"},
    {"id":"3","planType":"postpaid","data":"300","minData":"20","maxData":"200","calls":"500"},
    {"id":"4","planType":"prepaid","data":"400","minData":"20","maxData":"200","calls":"500"}
]

提前致谢。

Answer 1

你只需要改变

validate(e) { ... }

到

validate = e => { ... }

为了避免使用函数 validate 的上下文 this.。