J'essaie de créer une application à l'aide de "API de Rick and Morty" où il existe une liste de caractères avec divers paramètres tels que le sexe, le statut vivant, l'image, etc.
Ce que j'essaie de faire:
1) strong> J'essaie de créer une barre de recherche, de sorte que je puisse rechercher des noms dans la liste de 493 caractères. p> My CardList.js Composant: P> import React from "react";
import axios from "axios";
import Card from "./Card";
class CardList extends React.Component {
state = {
// url: `https://rickandmortyapi.com/api/character/${[...Array(494).keys()]}`,
character: []
};
async componentDidMount() {
//const res = await axios.get(this.state.url);
const ids = Array(493)
.fill(null)
.map((_, idx) => idx + 1)
.join(","); // '1,2,3...,300'
const url = `https://rickandmortyapi.com/api/character/[${ids}]`;
const res = await axios.get(url);
this.setState({
character: res.data
});
}
handleChange(e) {
e.preventDefault();
let typedValue = e.target.value;
console.log(typedValue);
}
render() {
let filter = this.state.character.filter(function(e) {
return e.name.includes("Pickle Rick");
});
return (
<div>
<form>
<input type="text" name="title" onChange={this.handleChange} />
</form>
{filter.map(character => (
<Card
key={character.id}
imgURL={character.image}
id={character.id}
name={character.name}
status={character.status}
species={character.species}
gender={character.gender}
type={character.type ? character.type : "Unknown"}
/>
))}
</div>
);
}
}
export default CardList;
4 Réponses :
Vous pouvez définir le TypedValue code> dans votre état. render() {
const {character, typedValue} = this.state
let filter = character.filter(char => char.name.includes(typedValue));
// ...
}
Cela ne fonctionne pas, l'erreur est "impossible de lire la propriété de la propriété non définie"
J'ai changé handlechange à une flèche pour éviter cette erreur. s'il vous plait verifiez maintenant
Il ne filtre rien, mais cela ajoute la chaîne de requête à l'URL lorsqu'il est appuyé sur Entrée, mais aucun filtrage
Pouvez-vous partager le résultat de console.log (caractère);
Bien sûr, il enregistre des objets dans 4 morceaux, chaque morceau a 100 caractères et ses 4 propriétés que j'ai définies dans ma carte
Essayez également console.log (this.state.typedValue) dans la fonction de rendu
Cela a fonctionné, merci pour l'aide, mettant une tique sur cette réponse
Votre méthode pourrait être:
async handleChange (e) {
e.preventDefault();
const typedValue = e.target.value;
const url = `https://rickandmortyapi.com/api/character/?name=${typedValue}`;
const res = await axios.get(url);
// now render the result
}
Le problème avec la solution est que nous ne pouvons pas accéder à "res" en dehors de la fonction HandLechange, de sorte que nous ne pouvons donc pas l'utiliser dans la méthode de rendu.
Vous pouvez enregistrer la valeur "res" en état de composant; De cette façon, vous pouvez l'utiliser.
Oui a du sens. Merci
Vous pouvez créer un autre tableau dans l'état
handleChange(e) {
e.preventDefault();
const { character } = this.state;
let typedValue = e.target.value;
let filteredCharacter = character.filter(char => char.includes(typedValue))
this.setState({filteredCharacter})
}
À mon avis, pourquoi ne définissez-vous pas un état pour régler le caractère.
J'aime: - p>
état = { p>
return e.name.includes(this.state.typedValue); });
Comment pouvons-nous accéder à la variable de tapevalue? Il est à l'intérieur de la fonction HandLechanger
Hey Abhinav, nous définissons l'état sur la fonction Handlechange. Donc, vous avez juste besoin d'accéder à "TypedValue" qui est à l'intérieur de l'état non de la variable TypedValue. J'espère que tu l'as eu.