Je suis nouveau pour réagir et j'essaie de faire une demande postale à l'aide de données de champ de texte, que quelqu'un peut m'aider à stocker cette entrée et à apporter une demande après pression sur un bouton.
J'ai essayé d'utiliser useref () code> qui m'a permis d'obtenir les données, mais je n'ai pas été capable de le stocker comme objet de données pour persister. p>
Mes données persistent, mais cela persiste un objet vide et l'état n'est pas mis à jour. P>
Si quelqu'un peut aider, j'apprécierai vraiment cela. p>
ci-dessous est mon app.js p > import React, { useState, useEffect, useRef, Component } from 'react';
import axios from "axios";
const api = axios.create({
baseURL: "http://localhost:8080/artists"
});
class App extends Component {
state = {
artists: [],
theArtistName: ""
}
constructor(props){
super(props);
this.getArtists()
}
//calling this method will allow artist array to be populated everytime an event occurs, e.g POST, PUT, DELETE
getArtists = async () =>{
let data = await api.get("/").then(({ data }) => data);
this.setState({artists: data}) //setting our artists to be the data we fetch
}
createArtist = async () =>{
let response = await api.post('/', {name: this.state.theArtistName})
console.log(response)
this.getArtists()
}
deleteArtist = async (id) =>{
let data = await api.delete('/${id}')
this.getArtists();
}
handleAddArtist = (event) =>{
event.preventDefault()
this.setState({
theArtistName: event.target.value
})
const data = this.state.theArtistName
console.log(data)
}
componentDidMount(){
this.createArtist()
}
render(){
// const {theArtistName} = this.state
return(
<>
<input type={Text} placeholder="Enter Artist Name" name="theArtistName"></input>
<button onClick={this.createArtist}>Add Artist</button>
{this.state.artists.map(artist => <h4 key={artist.id}>{artist.name}
<button onClick={() =>this.deleteArtist(artist.id)}>Delete artist</button></h4>)}
</>
)
}
}
export default App;
3 Réponses :
Tout d'abord, généralement, les éléments d'entrée HTML maintiennent leur propre état. Le moyen habituel d'accéder à la valeur d'un élément d'entrée à partir d'un composant de réagissage qui permet de contrôler l'état de l'élément d'entrée via ce composant en ajoutant un lismetteur code> Onchange code> et une valeur code> code> Attribut à l'élément d'entrée: P> useref code> est un crochet uniquement destiné aux composants de la fonction et non pour les composants de classe. Pour utiliser les réfs dans les composants de la classe, utilisez réact.creeweef () code>. class App extends Component{
constructor(props) {
super(props);
this.state = {artistName: ""};
this.handleArtistNameChange = this.handleArtistNameChange.bind(this);
}
handleArtistNameChange(event) {
this.setState({artistName: event.target.value});
}
render(){
return (
<input
type="text"
value={this.state.artistName}
onChange={this.handleArtistNameChange}
/>
);
}
}
Il n'a pas besoin de lier la méthode avec laquelle il utilise la fonction de flèche qui se lient automatiquement au contexte le plus proche
@adel Eh bien, cela est vrai concernant le code Joshua fourni dans sa question, mais pas en ce qui concerne l'exemple de ma réponse depuis que je n'utilise pas de fonction fléchée.
Hey Befeepilf Merci de votre réponse à ma question, je l'ai ajouté à mon code, mais j'ai toujours du mal à persister, il ne persiste pas avec ce code, je vais examiner votre commentaire initial plus et visez à résoudre le problème, 👍 🏽
@Joshua Vérifiez l'exemple que j'ai ajouté à ma réponse. Assurez-vous de lire tous les commentaires que j'ai ajoutés au code.
Incroyable, merci à tous pour votre aide. Befeepilf Merci beaucoup, vous avez résolu mon problème! Codesandbox est aussi incroyable.
Par exemple, l'état de la mise à jour réagissante de manière asynchrone, alors lorsque vous appelez manuelleaddartiste CODE> Fonction de mise à jour de l'état de l'événement afin de pouvoir stocker la valeur de l'événement de la variable comme suit: componentDidUpdate(prevProps,prevState){
if(prevState.theArtistName!==this.state.theArtistName)
this.createArtist()
}
Hé, merci pour votre aide Adel, j'ai essayé cela mais aucun événement ne se produit après que le bouton "Ajouter un artiste" est cliqué. Chaque fois que je recharge de la page, un autre bouton "Supprimer l'artiste" continue à apparaître sur la scène et persiste comme objet vide à ma base de données.
Vous ne pouvez pas appeler ceci.createartist () immédiatement après this.sestate car SetSatet incendie de manière asynchrone, vous devez déclencher this.createartist () dans < Code> ComponentDidUpdate Méthode de cycle de vie qui incendie immédiatement après le changement d'état. Vérifiez la réponse modifiée.
this.setstate code> est une fonction ASYNC, il faut un deuxième argument comme rappel. Cela devrait résoudre votre problème. I.e. import React, { useState, useEffect, useRef, Component } from "react";
import axios from "axios";
const api = axios.create({
baseURL: "http://localhost:8080/artists",
});
class App extends Component {
constructor(props) {
super(props);
this.state = {
artists: [],
theArtistName: "",
};
}
//calling this method will allow artist array to be populated everytime an event occurs, e.g POST, PUT, DELETE
getArtists = async () => {
let data = await api.get("/").then(({ data }) => data);
this.setState({ artists: data }); //setting our artists to be the data we fetch
};
createArtist = async () => {
let response = await api.post("/", { name: this.state.theArtistName });
console.log(response);
this.getArtists();
};
deleteArtist = async (id) => {
let data = await api.delete("/${id}");
this.getArtists();
};
handleAddArtist = (event) => {
event.preventDefault();
this.setState(
{
theArtistName: event.target.value,
},
() => {
this.createArtist();
}
);
};
componentDidMount() {
this.getArtists();
}
render() {
// const {theArtistName} = this.state
return (
<>
<input
type={Text}
placeholder="Enter Artist Name"
name="theArtistName"
></input>
<button onClick={this.handleAddArtist}>Add Artist</button>
{this.state.artists.map((artist) => (
<h4 key={artist.id}>
{artist.name}
<button onClick={() => this.deleteArtist(artist.id)}>
Delete artist
</button>
</h4>
))}
</>
);
}
}
export default App;
Hé, merci d'avoir aidé, j'ai essayé cela, mais cela n'a pas persisté les données réelles, seules les données vides sont persistées.
Redux Form fait cela extrêmement facile. Consultez la documentation ici Redux-Form.com/8.3.0