Reactjs 反应类型错误：无法读取属性'；propName'；空的

我有一个rest api项目，我想向我的项目添加带有react的UI，但我有一个错误：

TypeError: Cannot read property 'schoolName' of null

我在RESTAPI项目中有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() {
    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>

渲染函数的一部分：

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>

学校名称：

---

我试图点击提交按钮，并给了我错误我提到的。事实上，我不知道问题出在哪里。你能帮我吗？

因为你那里没有学名：

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

---

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

注意：还要确保在

组件安装中

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

您将值设置为
this.state.schoolName
，但尝试发送
this.state.schoolName
。您不应该像这样修改state对象
handleChange（event）{const state=this.state状态[event.target.name]=event.target.value；this.setState（state）；}
。您只能提供要更新的状态部分
handleChange（e）{this.setState（{[e.target.name]：e.target.value}）}
它不工作。同样的错误再次出现。我把我的问题描述得很糟糕。我的状态为真？我尝试单击渲染函数内的提交按钮时没有一行。是。但当你出错时，它也会给出行号。是的。获取一行my students list组件时出错，我将我的学生如下所示：
{item.school.schoolName}
页面加载后是否在输入中获取schoolName？