0
votes

Passer la valeur de la liste déroulante de la fonction à React.useEffect () lors de la sélection

Objectif: J'essaie de modifier le lien dans la fonction fetch () avec la valeur qui provient du menu déroulant.

Tentatives:↑

1) J'ai tenté de passer la valeur à la fonction comme GetAPILinks (Link_from_dropdown) et de l'appeler dans la fonction onSelect, J'obtiens une erreur indiquant: Appel de crochet non valide. Les hooks ne peuvent être appelés qu'à l'intérieur du corps d'un composant de fonction

2) J'ai également essayé d'autres méthodes pour le transmettre en le stockant dans une variable à l'intérieur de GetAPILinks mais j'ai généré des erreurs. p>

Je commence à croire que j'aborde tout cela de manière erronée. Tout conseil ou aide serait génial!

Mon code:

Ce code récupérera les données à partir d'un lien codé en dur et affichera une liste déroulante bouton qui imprime les valeurs sélectionnées dans la console.

import React from 'react';
import { DropdownButton, Dropdown} from 'react-bootstrap';

const GetAPILinks = () => {
  const [apiData, setApiData] = React.useState([]);
  React.useEffect(() => {
    fetch('https://Random_API/Link_From_Dropdown_Goes_Here')
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        setApiData(data);
      });
  }, []);

  return (
    <DropdownButton id="dropdown-item-button" title="API Links" onSelect={function(evt){console.log(evt)}}>
        <Dropdown.Item as="button" eventKey='API_Link1'>Link 1</Dropdown.Item>
        <Dropdown.Item as="button" eventKey='API_Link2'>Link 2</Dropdown.Item>
        <Dropdown.Item as="button" eventKey='API_Link3'>Link 3</Dropdown.Item>
    </DropdownButton>          
  );
}

export default GetAPILinks;

javascript reactjs

0 commentaires

4 Réponses :

0
votes

Vous êtes assez proche ici. Vous devez suivre une autre valeur d'état pour l'URL d'extraction. Le suivi dans une variable locale ou l'appel direct de la fonction ne déclenchera pas le rendu de votre composant lorsque les valeurs changent.

const GetAPILinks = () => {
  const [apiData, setApiData] = React.useState([]);
  const [fetchUrl, setFetchUrl] = React.useState('');
  React.useEffect(() => {
    if (fetchUrl) {
      fetch(fetchUrl)
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          setApiData(data);
        });
    }
  }, [fetchUrl]);

  return (
    <DropdownButton id="dropdown-item-button" title="API Links" onSelect={(e)=>{setFetchUrl(e.target.eventKey)}}>
        <Dropdown.Item as="button" eventKey='API_Link1'>Link 1</Dropdown.Item>
        <Dropdown.Item as="button" eventKey='API_Link2'>Link 2</Dropdown.Item>
        <Dropdown.Item as="button" eventKey='API_Link3'>Link 3</Dropdown.Item>
    </DropdownButton>          
  );
}

dans votre menu déroulant onSelect , vous pouvez définissez la valeur de fetchUrl en utilisant la fonction setFetchUrl fournie par le hook useState .

Il ne reste plus qu'à pour indiquer à votre hook useEffect qu'il doit s'exécuter chaque fois que la valeur d'état fetchUrl change. Vous devriez ajouter fetchUrl au tableau deps.

Cela pourrait ressembler à ceci:

const [fetchUrl, setFetchUrl] = useState(initialValue);

0 commentaires

0
votes

0 commentaires

0
votes

Vous devriez créer un autre état pour le lien actuel et l'ajouter aux dépendances useEffect .

Cela devrait être quelque chose comme ça, je n'ai pas testé.

import React from 'react';
import { DropdownButton, Dropdown} from 'react-bootstrap';

const GetAPILinks = () => {
  const [apiData, setApiData] = React.useState([]);
  const [currentLink, setCurrentLink] = React.useState('');

  React.useEffect(() => {
    fetch(`https://Random_API/${currentLink}`)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        setApiData(data);
      });
  }, [currentLink]);

  return (
    <DropdownButton id="dropdown-item-button" title="API Links" onSelect={(e)=>{setCurrentLink(e.target.eventKey)}}>
        <Dropdown.Item as="button" eventKey='API_Link1'>Link 1</Dropdown.Item>
        <Dropdown.Item as="button" eventKey='API_Link2'>Link 2</Dropdown.Item>
        <Dropdown.Item as="button" eventKey='API_Link3'>Link 3</Dropdown.Item>
    </DropdownButton>          
  );
}

export default GetAPILinks;

J'espère que cela vous aidera.

0 commentaires

0
votes

Ajoutez une autre pièce d'état pour suivre la valeur de liste déroulante sélectionnée xxx pré>

et ajouter requête code> sur la matrice de dépendance de l'effet et ne fait que la demande de récupération lorsque Query Code> est la vérité p> xxx pré>

p>

Une solution plus propre peut être de facturer la logique de récupération à sa propre fonction, appelez-la avec le rappel et stockez uniquement le résultat dans l'état P>

const GetAPILinks = () => {
  const [apiData, setApiData] = useState([]);

  const fetchData = query => fetch(`https://Random_API/${query}`)
    .then((response) => {
      return response.json();
    })
    .then(setApiData(data));

  return (
    <DropdownButton id="dropdown-item-button" title="API Links" onSelect={fetchData}>
        <Dropdown.Item as="button" eventKey='API_Link1'>Link 1</Dropdown.Item>
        <Dropdown.Item as="button" eventKey='API_Link2'>Link 2</Dropdown.Item>
        <Dropdown.Item as="button" eventKey='API_Link3'>Link 3</Dropdown.Item>
    </DropdownButton>          
  );
}

0 commentaires