Как мне интерпретировать следующую ошибку, которую я получил? - PullRequest
Новая
       71

Как мне интерпретировать следующую ошибку, которую я получил?

0 голосов
/ 15 апреля 2020

Я работаю над проектом, чтобы лучше познакомиться с написанием кода. Я новичок и пойду, чтобы понять как можно больше. Я не верю, что у меня есть орфографические ошибки. Кто-нибудь объяснит, что не так в коде, который у меня есть? Я получил это сообщение об ошибке: «Импорт и экспорт могут появляться только на верхнем уровне.» 

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;

1 Ответ

0 голосов
/ 15 апреля 2020

Вы пытаетесь экспортировать в функции useEffect. Я думаю, что вы пропустили, чтобы закрыть его. А также вы закрываете requestPets до useEFfect, что тоже не правильно. Я предлагаю вам использовать 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;
...