Как я могу отфильтровать данные API и вывести имя на консоль?

Я расстроен прямо сейчас. Я пытаюсь фильтровать данные в API и пытаюсь передать их в массив хуков useState и распечатать их на консоли. Я использую React и действительно борюсь. Ниже приведен код.

TimeChart.js

const TimeChart = () =>{
    const [tournament, setTournament] = useState([]);

    useEffect(() =>{
        axios.get("https://api.sportsdata.io/v3/lol/scores/json/Competitions?key=94c287b249d74701adf60e03aa398884")
        .then((res) =>{
            let data = res.data;

        let lcsT = data.map((item) => item.Name === "NA LCS").Name;
        let lecT = data.filter((item) => item.Name === "LEC").Name;
        let lplT = data.filter((item) => item.Name === "LPL").Name;
        let lckT = data.filter((item) => item.Name === "LCK").Name;
        let msiT = data.filter((item) => item.Name === "Mid-Season Invitational").Name;
        let worldsT = data.filter((item) => item.Name === "World Championship").Name;

        setTournament([lcsT, lecT, lplT, lckT, msiT, worldsT]);
           console.info(tournament);
        })
    },[])

Если вы еще не поняли, я пытаюсь получить названия турниров и отфильтровать только их имена, поместить их в массив хуков setTournament useState и вывести их на консоль, но я получаю undefined, возвращаемый в консоли.

Что-то я также пробовал:

let lcsT = data.map((item) => item.Name === "NA LCS");
        let lcs = lcsT.map((item) => item.Name);

        let lecT = data.filter((item) => item.Name === "LEC");
        let lec = lecT.map((item) => item.Name);

        let lplT = data.filter((item) => item.Name === "LPL");
        let lpl = lplT.map((item) => item.Name);

        let lckT = data.filter((item) => item.Name === "LCK");
        let lck = lckT.map((item) => item.Name);

        let msiT = data.filter((item) => item.Name === "Mid-Season Invitational");
        let msi = msiT.map((item) => item.Name);

        let worldsT = data.filter((item) => item.Name === "World Championship");
        let worlds = worldsT.map((item) => item.Name);
        setTournament(lcs, lec, lpl, lck, msi, worlds);
    console.info(tournament);

Но это возвращает пустой массив в консоли.

Что-то я тоже пробовал:

    for(let i = 0; i < data.length; i++){
                if ( data[i].Name === "NA LCS"){
                    let lcs = data[i].Name;
                    setTournament(lcs);
                } else if (data[i].Name === "LEC"){
                    let lec = data[i].Name;
                    setTournament(lec);
                } else if (data[i].Name === "LPL"){
                     let lpl = data[i].Name;
                     setTournament(lpl);
                } else if (data[i].Name === "LCK"){
                     let lck = data[i].Name;
                     setTournament(lck);  
                 } else if (data[i].Name === "Mid-Season Invitational"){
                     let msi = data[i].Name;
                     setTournament(msi);    
                 } else if (data[i].Name === "World Championship"){
                     let worlds = data[i].Name;
                     setTournament(worlds);
                 }
                 console.info(tournament);
            }

Если кто-то может указать мне, что я делаю неправильно, пожалуйста, сделайте это, это сводит меня с ума!

Спасибо!

Вы не можете немедленно зарегистрировать изменение состояния. Вам нужно будет использовать useEffect для проверки изменений в состоянии. useEffect(() => console.info(tournament), [tournament]);

Andy 10.04.2022 15:47

Хорошо, я попробовал это, и он все еще возвращается undefined. Хотя спасибо :D

Wiaan.Duvenhage 10.04.2022 16:05

1) let lcsT = data.map((item) => item.Name === "NA LCS").Name; 2) let lecT = data.filter((item) => item.Name === "LEC").Name; --> здесь есть несколько проблем. В 1, .map() обратный вызов которого вернет результат item.Name === "NA LCS". Это будет массив значений truthy, falsy. Ни у одного из них не будет реквизита .Name. В 2. .filter() возвращает "Array". Этот массив будет иметь объекты, и "может быть" один или несколько из этих отфильтрованных объектов могут иметь реквизит .Name.

jsN00b 10.04.2022 16:40

Пожалуйста, попробуйте: setTournament(data.filter(({ Name }) => ["NA LCS", "LEC", "LPL", "LCK", "Mid-Season Invitational", "World Championship"].includes(Name)).map(({ Name }) => Name));. Если попробуете, поделитесь отзывом.

jsN00b 10.04.2022 16:45

@ jsN00b Спасибо, это действительно работает! Цените помощь!

Wiaan.Duvenhage 10.04.2022 18:27
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
33
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы ошибаетесь, используя хук состояния React.

Вы не можете использовать переменную состояния, как только вы вызываете setState.

например Вы использовали setTournament(xxxx); console.info(tournament); в своем коде. Это ошибка.

например Вы допустили ошибку, установив массив в состояние tournament: setTournament(lcs, lec, lpl, lck, msi, worlds);.

Вы не можете установить массив, передав несколько параметров.

setState функция может принимать только параметр.

Вы должны изменить его следующим образом:


newTournament = [lcs, lec, lpl, lck, msi, worlds];
console.info(newTournament);
setTournament(newTournament);

Согласно вашим комментариям, вы можете использовать следующий код.

const dataMap = {};
data.forEach(item => {
  if (
    item.Name === "NA LCS" ||
    item.Name === "LEC" ||
    item.Name === "LPL" ||
    item.Name === "LCK" ||
    item.Name === "Mid-Season Invitational" ||
    item.Name === "World Championship"
  ) {
    dataMap[item.name] = true;
  }
});
const newTournament = Object.keys(dataMap);
console.info(newTournament);

Хорошо, спасибо, я так и сделал, но вот что возвращается в консоль: ``` (6) [undefined, undefined, undefined, undefined, undefined, undefined] ```

Wiaan.Duvenhage 10.04.2022 16:19

@Wiaan.Duvenhage Пожалуйста, исправьте свой код let lcsT = data.map((item) => item.Name === "NA LCS").Name;. map функция возвращает массив. Таким образом, вы не можете использовать .Name в массиве.

Liki Crus 10.04.2022 16:22

Хорошо, я сделал это, теперь помещая массив внутрь массива, но мне нужно только имя, а не весь массив. Вот что возвращается в консоль: (6) [Массив(1), Массив(1), Массив(1), Массив(1), Массив(1), Массив(1)]. На самом деле я хочу: (6) ['NA LCS', 'LEC', 'LPL', 'LCK', 'Mid-Seaons Invitational', 'World Championship']

Wiaan.Duvenhage 10.04.2022 16:26

@Wiaan.Duvenhage Не могли бы вы распечатать данные в консоли, чтобы показать мне? ваш код не имеет смысла. let lecT = data.filter((item) => item.Name === "LEC"); let lec = lecT.map((item) => item.Name);lec переменная будет содержать ['LEC', 'LEC', ...]

Liki Crus 10.04.2022 16:26

Может быть, у вас есть разногласия? Я могу объяснить лучше там?

Wiaan.Duvenhage 10.04.2022 16:31

@Wiaan.Duvenhage Я обновил свой ответ. Пожалуйста, используйте код в нем. И дайте мне знать.

Liki Crus 10.04.2022 16:33

@Wiaan.Duvenhage, если это правильно, обновите и свой пост. Вам нужно описать, что вы действительно хотели получить от результата API, а также текущие фрагменты кода.

Liki Crus 10.04.2022 16:35

Вот исправили! Большое спасибо!!!! я обновлю свой пост

Wiaan.Duvenhage 10.04.2022 16:40

Другие вопросы по теме