如何解释我收到的以下错误？

Question

我正在做一个项目，这样我可以更加熟悉编写代码。我是初学者，希望尽可能多地了解。我不相信我有任何拼写错误。有人会解释我到目前为止的代码有什么问题吗？ I received this error message: "import and export may only appear at the top level."

import React, { useState, useEffect } from "react";`enter code here`
import pet, { ANIMALS } from "@frontendmasters/pet";
import Results from './Results';
import useDropdown from "./useDropdown";

const SearchParams = () => {
    const [location, setLocation] = useState("Seattle, WA");
    const [breeds, setBreeds] = useState([]);
    const [animal, AnimalDropdown] = useDropdown("Animal", "dog", ANIMALS);
    const [breed, BreedDropdown, setBreed] = useDropdown("Breed", "", breeds);
    const [pets, setPets] = useState([]);
};
async function requestPets() {
    const { animals } = await pet.animals({
        location,
        breed,
        type: animal
    });

    setPets(animals || []);
}

useEffect(() => {
    setBreeds([]);
    setBreed("");

    pet.breeds(animal).then(({ breeds: apiBreeds }) => {
        const breedStrings = apiBreeds.map(({ name }) => name);
        setBreeds(breedStrings);
        [animal, setBreed, setBreeds]
    });

    return (
        <div className="search-params">
            <form
                onSubmit={e => {
                    e.preventDefault();
                    requestPets();
                }
                } >
                <label htmlFor="location">
                    Location
                   <input
                        id="location"
                        value={location}
                        placeholder="Location"
                        onChange={e => setLocation(e.target.value)}
                    />
                </label>
                <AnimalDropdown />
                <BreedDropdown />
                <button>Submit</button>
            </form>
                <Results pets={pets} />enter code here
        </div >
    );


    export default SearchParams;

Answer 1

您正在尝试在 useEffect 函数中导出。我想你错过了关闭它。而且您在 useEFfect 之前关闭了 requestPets，这也不正确。我建议你使用 eslint。

我觉得应该是这样的吧？

import React, { useState, useEffect } from "react";`enter code here`
import pet, { ANIMALS } from "@frontendmasters/pet";
import Results from './Results';
import useDropdown from "./useDropdown";

const SearchParams = () => {
    const [location, setLocation] = useState("Seattle, WA");
    const [breeds, setBreeds] = useState([]);
    const [animal, AnimalDropdown] = useDropdown("Animal", "dog", ANIMALS);
    const [breed, BreedDropdown, setBreed] = useDropdown("Breed", "", breeds);
    const [pets, setPets] = useState([]);

async function requestPets() {
    const { animals } = await pet.animals({
        location,
        breed,
        type: animal
    });
    setPets(animals || []);
}

useEffect(() => {
    setBreeds([]);
    setBreed("");

    pet.breeds(animal).then(({ breeds: apiBreeds }) => {
        const breedStrings = apiBreeds.map(({ name }) => name);
        setBreeds(breedStrings);
        [animal, setBreed, setBreeds]
    });
});

    return (
        <div className="search-params">
            <form
                onSubmit={e => {
                    e.preventDefault();
                    requestPets();
                }
                } >
                <label htmlFor="location">
                    Location
                   <input
                        id="location"
                        value={location}
                        placeholder="Location"
                        onChange={e => setLocation(e.target.value)}
                    />
                </label>
                <AnimalDropdown />
                <BreedDropdown />
                <button>Submit</button>
            </form>
                <Results pets={pets} />enter code here
        </div >
    );
}
    export default SearchParams;

如何解释我收到的以下错误？

How do I interpret the following error I've received?

javascript

arrays

destructuring

ecmascript-6

reactjs