React Hooks - La fonction à l'intérieur d'un composant fonction passé comme prop ne peut pas accéder à l'état.

Question

J'ai lu des articles sur les crochets React et je voulais les essayer sur le nouveau site Web que je développe. J'essaie de passer une fonction asynchrone en tant que prop. Une partie de la fonction consiste à définir l'état de mes "villes" et à établir un journal de la console, juste pour voir si l'API fonctionne. Je reçois l'erreur "setCities is not a function" ou "cities returns undefined" si je l'enregistre directement en console. Je pense que la fonction ne peut pas accéder au {cities, setCities} l'état. Je l'ai essayé dans le composant de classe et cela fonctionne. Quelqu'un a-t-il rencontré des situations similaires ? Voici l'exemple de code :

import React, { useState } from "react";
import axios from "axios";
import Menu from "./Menu";

function App() {
    const { cities, setCities } = useState([]);

    const searchSubmit = async term => {
        try {
            const res = await axios.get("http://localhost:8080/general/search", {
                params: { city: term }
            });
            setCities(res.data);
            console.log(cities);
        } catch (err) {
            console.log(err.message);
        }
    };

    return (
        <div className="ui container">
            <Menu handleSearchSubmit={searchSubmit} />
        </div>
    );
}

Answer 1

useStates retourner un tableau, pas un objet...

Donc vous pouvez changer

const { cities, setCities } = useState([]);

à

const [ cities, setCities ] = useState([]);

Et ça devrait marcher.