React TypeError: Невозможно прочитать свойство 'propName' из null

Question

У меня есть проект api rest, и я хочу добавить пользовательский интерфейс с реагировать на мой проект, но у меня есть ошибка:

TypeError: Cannot read property 'schoolName' of null

У меня есть 2 сущности мой проект api rest и 1 внешний ключ.

Мои методы Compenent:

Мой конструктор:

   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

Ошибка в вашей функции 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});
}

Демо

Answer 2

Потому что у вас нет имени школы:

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