Ошибка типа: не удается прочитать свойство 'page_title' неопределенного в ReactJS

#reactjs #laravel

Вопрос:

Я пытаюсь обновить свои поля в приложении Reactjs. Мне нужно получить значение в полях ввода, но когда я пытаюсь извлечь его, я получаю следующее сообщение об ошибке TypeError: не удается прочитать свойство ‘page_title’ неопределенного значения. Мой API работает нормально, и он был извлечен в моем компоненте редактирования, пожалуйста, помогите мне.

мой edit.js компонент

 import React, { Component } from 'react';
import Sidebar from "../Sidebar";
import Header from "../Header";
import {Link} from "react-router-dom";
import { Editor } from '@tinymce/tinymce-react';


class UpdateAbout extends Component {
constructor(){
    super();
    this.state={
        UpdateAbout:'',
        loading:true
    }
}

componentDidMount(){
    fetch('http://localhost:8000/api/editabout/' this.props.match.params.id)
    .then(response => response.json())
    .then(json => 
        this.setState({
            UpdateAbout:json.data,
            loading:false
        })    
    );
}

render(){
    return(

        

    <div className="wrapper">
        <Sidebar/>

        <div id="content">
            <Header/>
            <div className="container" style={{marginTop:'2em'}}>
                <div className="row">
                    <div style={{marginBottom:'2em'}}>
                        <Link to="/admin-about" className="btn btn-primary">Back</Link>
                    </div>
                    <div className="col-md-12">
                        <div className="card">
                            <div className="card-header">Manage About Page Content</div>
                            <div className="card-body">
                                <form>
                                    <div className="row">
                                        
                                        <input
                                            value={this.state.UpdateAbout.page_title}
                                            className="input100"
                                            type="text"
                                            required
                                            name="page_title"
                                        />
                                    </div>
                                </form>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    );
    }
    }

    export default UpdateAbout;

Пожалуйста, помогите мне…

Ответ №1:

     this.state={
        UpdateAbout:'',
        loading:true
    }

UpdateAbout это объект, а не строка, так и должно быть UpdateAbout: {} .

 .then(response => response.json())
.then(json => {
  this.setState({
    UpdateAbout:json.data

response.json() возвращает data , так что, вероятно, так и должно быть data => ... UpdateAbout: data .

Ответ №2:

Вы не обрабатываете время между началом выполнения вызова api и его окончанием. Поскольку UpdateAbout.page_title в течение этого времени у вас его нет, вы получаете undefined для него.

Обратите внимание, что ваш вызов api выполняется в методе жизненного цикла, который выполняется после монтирования компонента, т.Е. 1-го рендеринга в DOM (где у вас нет данных api.)

Несколько способов исправить это:

Добавьте значение по умолчанию в ваше состояние.

 this.state={
        UpdateAbout: {
            page_title: "..."
        },
        loading:true
    }

Перед чтением page_title проверьте значение загрузки в состоянии.

 value={!loading amp;amp; this.state.UpdateAbout.page_title}

Добавьте dom-заполнитель, пока загрузка выполняется true.