essayer de créer une nouvelle note dans le composant "Créer" Envoyé une demande postale et l'a ajouté à la base de données. Maintenant, j'ai besoin que la modification soit reflétée dans l'état de "application" composant.
solution: sur la soumission de la note (Créer une Comp) dans la base de données, une copie de l'objet est envoyée à app.js, où nous mettons à jour la note Propriété en état de refléter le changement de la base de données. P>
problème: obtenir quelques erreurs, les lignes de problèmes sont étiquetées dans le code. P>
p>
p>
import React, { Component } from 'react';
import classes from './Create.module.css';
class Create extends Component{
state= {
title: "",
body: ""
}
onChange = (e)=>{
this.setState({[e.target.name]: e.target.value})
}
handleSubmit = (e)=>{
e.preventDefault();
const post = {
title: this.state.title,
body: this.state.body
}
// Problem 1
fetch('http://localhost:3001/notes', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(post)
})
.then(res => res.json())
.then(data => this.props.updateState(data))
this.setState({
title: "",
body: ""
})
}
render(){
return (
<div className={classes.CreateContainer}>
<div className={classes.Create}>
<h1>Create</h1>
<form onSubmit={this.handleSubmit}>
<label>Title:</label><br/>
<input type="text" name="title" onChange={this.onChange} value={this.state.title}></input><br/>
<label>Body:</label><br/>
<textarea row="8" col="50" name="body" onChange={this.onChange} value={this.state.body}></textarea><br/>
<input type="submit" value="Submit"></input>
</form>
</div>
</div>
)
}
}
export default Create;4 Réponses :
Essayez de faire cela
class App extends Component{
state = {
notes: []
}
componentDidMount(){
fetch('http://localhost:3001/notes')
.then(resp => resp.json())
.then(data => this.setState({notes: data}))
}
onSubmitUpdateState = (newNote) => { //change to arrow function//
const oldState = [...this.state.notes]
// Problem 2)
this.setState({notes: [...oldState, newNote]});
}
render(){
return(
<div className="App">
<Notes notes={this.state.notes}/>
<Create updateState={this.onSubmitUpdateState}/>
</div>
)
}
}
export default App;
en javascript, Les méthodes de classe ne sont pas limitées par défaut , ceci donc répondre à des discussions sur Pourquoi est-ce que c'est comme ça?
Si vous n'utilisez pas la fonction de flèche, assurez-vous de BIND () Vos manutentionnaires d'événements pour accéder à .
Pourquoi cela se produit-il que ceci n'est pas l'application de composant sans contraignation?
C'est juste comment JavaScript fonctionne . Les méthodes de classe ne sont pas limitées par défaut.
Utilisez Fonction de flèche: Méthode de liaison:
Créez un constructeur et ajoutez cette ligne dans votre constructeur sans constructeur
L'erreur est de se plaindre que Je ne suis pas sûr de quoi N'est-ce pas limité lorsque la fonction est passée sous forme d'accessoires Il y a une autre réponse qui explique Pourquoi est-ce que cela se passe-t-il? ceci.state est indéfini, vous devrez peut-être passer la fonction this.onsuSuMiTupDaTestate comme fonction de flèche