Status in untergeordnete Komponente übergeben, da Requisiten nicht funktionieren

Question

Ich versuche eine CRUD-Beispielanwendung mit React- und React-Router zu erstellen, und ich kann nicht herausfinden, warum der Status nicht in eine Kindkomponente übergeht, wie ich bin erwartet es zu. Wenn ich die Route edit ankreuze, rendert es die Komponente Edit, die das Kätzchen, das ich will, aus der Datenbank holt und seine Informationen an eine Formular-Komponente sendet, die sowohl zum Bearbeiten eines vorhandenen Kätzchens als auch zum Hinzufügen eines neuen Kätzchens verwendet wird.

Hier ist die Komponente bearbeiten:

import React, { Component } from 'react'; 
import axios from 'axios'; 
import { match } from 'react-router-dom'; 
import Form from './Form'; 


export default class Edit extends Component { 
    constructor(props) { 
     super(props) 

     this.state = {} 
    } 

    componentDidMount() { 
     axios.get(`/updateKitten/${this.props.match.params.id}`) 
     .then(res => { 
      const kitten = res.data 
      this.setState({ kitten }) 
      console.log(this.state.kitten.name) //Sammy, or something 
     }) 
     .catch(err => console.log(err)) 
    } 

    render() { 
     return (
       <Form 
        name={this.state.kitten.name} // throws error or undefined 
        description={this.state.kitten.description} //throws error or undefined 
        route={this.props.match.params.id} 
       /> 
     ) 
    } 
} 

Die Edit-Komponente übergibt Namen, die Beschreibung und die Route zu diesem Formular Komponente:

import React, { Component } from 'react'; 
import axios from 'axios'; 

export default class Add extends Component { 
    constructor(props) { 
    super(props) 

    this.state = { name: this.props.name, description: this.props.description} 

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

    handleChange(e) { 
    const name = e.target.name; 
    const value = e.target.value; 

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

    handleSubmit(e) { 
    axios.post(`/addKitten/${this.props.route}`, this.state) 
     .then(this.setState({ name: '', description: '' })) 
    e.preventDefault(); 
    } 

    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     <label>Name</label> 
     <input type='text' name="name" value={this.state.name} 
     onChange={this.handleChange}/> 
     <label>Description</label> 
     <input type='text' name="description" value={this.state.description} 
      onChange={this.handleChange}/> 
     <input type='submit' value='Submit' /> 
     </form> 
    ) 
    } 
} 

Und bekomme ich folgende Fehlermeldung:

bundle.js:28950 Uncaught TypeError: Cannot read property 'name' of undefined

von versuchen, diese Informationen als pr zu senden ops zu der Form Komponente.

Was mache ich falsch?

Answer 1

Zwei Dinge,

Erstens: In Ihrem bearbeiten Komponente haben Sie Kätzchen Zustand nicht initialisiert und Sie setzen die API Ergebnis basiert. ComponentDidMount wird jedoch aufgerufen, nachdem die Komponente aufgerufen wurde. Daher wurde das DOM einmal gerendert, und beim ersten Mal wurde kein Wert als this.state.kitten.name oder this.state.kitten.description gefunden.

Es ist nur nach der API ein Erfolg, dass Sie den Kätzchenstatus festlegen. Machen Sie deshalb beim Rendern eine Überprüfung.

Zweitens: Sie haben console.log(this.state.kitten.name) nach der setState Funktion. Jedoch setState is asynchronous. Sehen Sie diese Frage:

Change state on click react js

und daher müssen Sie console.log in setState Rückruf

Sie Code angeben aussehen wird

export default class Edit extends Component { 
    constructor(props) { 
     super(props) 

     this.state = {} 
    } 

    componentDidMount() { 
     axios.get(`/updateKitten/${this.props.match.params.id}`) 
     .then(res => { 
      const kitten = res.data 
      this.setState({ kitten }. function() { 
        console.log(this.state.kitten.name) //Sammy, or something 
      }) 

     }) 
     .catch(err => console.log(err)) 
    } 

    render() { 
     return (
       <Form 
        name={this.state.kitten.name || '' } 
        description={this.state.kitten.description || ''} 
        route={this.props.match.params.id} 
       /> 
     ) 
    } 
} 

Answer 2

Wenn Ihre Edit-Komponente zum ersten Mal geladen wird, verfügt sie nicht über kitten. Daher der Fehler.

Was Sie tun müssen, ist die Schaffung eines empty Kätzchen. In Ihrer Edit-Komponente ...

this.state = { kitten: {name:''} } 

Damit wird der Name des Kätzchens beim allerersten Mounten/Rendern Ihrer Komponente auf eine leere Zeichenfolge gesetzt.