Я расстроен прямо сейчас. Я пытаюсь фильтровать данные в API и пытаюсь передать их в массив хуков useState и распечатать их на консоли. Я использую React и действительно борюсь. Ниже приведен код.
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);
}
Если кто-то может указать мне, что я делаю неправильно, пожалуйста, сделайте это, это сводит меня с ума!
Спасибо!
Хорошо, я попробовал это, и он все еще возвращается undefined
. Хотя спасибо :D
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
.
Пожалуйста, попробуйте: setTournament(data.filter(({ Name }) => ["NA LCS", "LEC", "LPL", "LCK", "Mid-Season Invitational", "World Championship"].includes(Name)).map(({ Name }) => Name));
. Если попробуете, поделитесь отзывом.
@ jsN00b Спасибо, это действительно работает! Цените помощь!
Вы ошибаетесь, используя хук состояния 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 Пожалуйста, исправьте свой код let lcsT = data.map((item) => item.Name === "NA LCS").Name;
. map
функция возвращает массив. Таким образом, вы не можете использовать .Name
в массиве.
Хорошо, я сделал это, теперь помещая массив внутрь массива, но мне нужно только имя, а не весь массив. Вот что возвращается в консоль: (6) [Массив(1), Массив(1), Массив(1), Массив(1), Массив(1), Массив(1)]. На самом деле я хочу: (6) ['NA LCS', 'LEC', 'LPL', 'LCK', 'Mid-Seaons Invitational', 'World Championship']
@Wiaan.Duvenhage Не могли бы вы распечатать данные в консоли, чтобы показать мне? ваш код не имеет смысла. let lecT = data.filter((item) => item.Name === "LEC"); let lec = lecT.map((item) => item.Name);
lec
переменная будет содержать ['LEC', 'LEC', ...]
Может быть, у вас есть разногласия? Я могу объяснить лучше там?
@Wiaan.Duvenhage Я обновил свой ответ. Пожалуйста, используйте код в нем. И дайте мне знать.
@Wiaan.Duvenhage, если это правильно, обновите и свой пост. Вам нужно описать, что вы действительно хотели получить от результата API, а также текущие фрагменты кода.
Вот исправили! Большое спасибо!!!! я обновлю свой пост
Вы не можете немедленно зарегистрировать изменение состояния. Вам нужно будет использовать
useEffect
для проверки изменений в состоянии.useEffect(() => console.info(tournament), [tournament]);