Question

我有一个REST API项目，我想添加UI对我的项目做出反应，但是我遇到了一个错误：

TypeError: Cannot read property 'schoolName' of null

我的rest api项目中有2个实体和1个外键。

我的权限方法：

我的构造函数：

   constructor(props) {
    super(props);
    this.state = {id:'',firstName:'',lastName:'',email:'',school:''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

componentDidmount：

    componentDidMount() {
    fetch('http://localhost:8080/student/getStudent/'+this.props.match.params.id)
        .then(response=>{
            return response.json();
        }).then(result=>{
            console.log(result);
            this.setState({
                id:result.id,
                firstName:result.firstName,
                lastName:result.lastName,
                email:result.email,
                schoolName:result.school.schoolName
            });
    });
}

我使用渲染功能的

handleChange和handleSubmit方法：

handleChange(event) {
    const state = this.state
    state[event.target.name] = event.target.value;
    this.setState(state);
}

handleSubmit(event){
    event.preventDefault();
    fetch('http://localhost:8080/student/updateStudent/'+this.props.match.params.id,{
        method:'PUT',
        body: JSON.stringify({
            id:this.state.id,
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            email:this.state.email,
            schoolName:this.state.school.schoolName

        }),
        headers: {
            "Content-type": "application/json; charset=UTF-8"
        }
    }).then(response=>{
        if(response.status===200){
            alert("Student update successfully.");
        }
    });
}

渲染功能的一部分：

<p>
                        <label>School Name :</label>
                        <input type="text" className="form-control" name="schoolName" value={this.state.schoolName} onChange={this.handleChange} placeholder="School Name"></input>
                    </p>

我尝试单击提交按钮，并给我我提到的错误。其实我不知道这个问题。请你能帮我吗？

Answer 1

因为那里没有schoolName：

this.setState({
                id:result.id,
                firstName:result.firstName,
                lastName:result.lastName,
                email:result.email,
                schoolName:result.school.schoolName
            });

只需将其更改为：

this.setState({
                id:result.id,
                firstName:result.firstName,
                lastName:result.lastName,
                email:result.email,
                school:result.school.schoolName
            });

Answer 2

您的handleSubmit函数出错。

只需更改此

JSON.stringify({
   id:this.state.id,
   firstName: this.state.firstName,
   lastName: this.state.lastName,
   email:this.state.email,
   schoolName:this.state.school.schoolName  // error because this.state.school is null and it is wrong also because you have data in  this.state.schoolName
})

对此，

JSON.stringify({
    id:this.state.id,
    firstName: this.state.firstName,
    lastName: this.state.lastName,
    email:this.state.email,
    schoolName:this.state.schoolName  
})

注意：还要确保在componentDidMount中

this.setState({
     id:result.id,
     firstName:result.firstName,
     lastName:result.lastName,
     email:result.email,
     schoolName:result.school.schoolName // this is not a type, make sure you have schoolName under result.school
});

不要这样设置状态，

handleChange(event) {
    const state = this.state
    state[event.target.name] = event.target.value;
    this.setState(state);
}

您应该这样做

handleChange(event) {
    this.setState({[event.target.name]:event.target.value});
}

Demo

反应TypeError：无法读取null的属性'propName'

2 个答案: