0
votes

Recherche sur un objet json (réagir)

J'essaie d'avoir une barre de recherche qui met à jour l'ensemble des entrées json en fonction de la requête. Voici le code qui affiche la liste des vidéos ( <Videos videos={this.state.data}/> ). Lorsque la page se charge, je souhaite appeler <Videos videos={this.state.data}/> , mais après cette requête de la barre de recherche, je dois mettre à jour cette liste. Ma fonctionnalité de recherche ne fonctionne pas pour une raison quelconque.

class App extends Component {
  state = {
    query: "",
    data: [],
    filteredData: []
  };

  handleInputChange = event => {
    const query = event.target.value;

    this.setState(prevState => {
      const filteredData = prevState.data.filter(element => {
        return element.title.toLowerCase().includes(query.toLowerCase());
      });

      return {
        query,
        filteredData
      };
    });
  };

  getData = () => {
    fetch('http://localhost:3000/api/videos')
      .then(response => response.json())
      .then(data => {
        const { query } = this.state;
        const filteredData = data.filter(element => {
          return element.title.toLowerCase().includes(query.toLowerCase());
        });
        this.setState({
          data,
          filteredData
        });
      });
  };

componentWillMount() {
    this.getData();
  }

  render() {
    return (
      <div className="searchForm">
        <form>
          <input
            placeholder="Search for..."
            value={this.state.query}
            onChange={this.handleInputChange}
          />
        </form>
        <Videos videos={this.state.data}/>
        <div>{this.state.filteredData.map(i => <p>{i.name}</p>)}</div>
      </div>
    );
  }
}

Je suis nouveau pour réagir, tous les pointeurs seront appréciés.

javascript reactjs

0 commentaires

3 Réponses :

0
votes

Vous utilisez this.state.data dans le composant Videos que vous avez obtenu du serveur. Vous devez utiliser this.state.filteredData pour afficher les entrées qui dépendent de la query :

<Videos videos={this.state.filteredData}/>

1 commentaires

Merci. Votre suggestion avec EVeras a aidé. Je ne peux marquer qu'une seule réponse comme résolue.

1
votes

Vous créez un nouvel objet sans la propriété data et définissez cet objet comme état chaque fois que vous appelez this.setState. La propriété data est donc supprimée.

Sur la méthode handleInputChange, procédez comme suit:

 this.setState({
          ...this.state,
          data,
          filteredData
 });

Et sur la méthode getData, procédez comme suit:

 return {
       ...this.state,
        query,
        filteredData
 };

2 commentaires

Il ne mute pas l'état. Il crée un nouvel objet pour l'état mais sans ...this.state

Tu as raison. J'ai mis à jour la réponse. Merci @RukkiesMan.

0
votes

Vous devez lier le handleInputChange à this . Regardez ceci pour en savoir plus.

0 commentaires