如何过滤 api 数据并将名称打印到控制台？

Question

我现在很沮丧。我正在尝试过滤 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.log(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.log(tournament);

但是这个 returns 控制台中的一个空数组。

我也试过的东西：

    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.log(tournament);
            }

如果有人能指出我做错了什么，请指出，这让我发疯！

谢谢！

Answer 1

你使用 React state hook 是错误的。

不能一调用就使用状态变量setState。

例如您在代码中使用了 setTournament(xxxx); console.log(tournament);。这是错误的。

例如您错误地将数组设置为 tournament 状态：setTournament(lcs, lec, lpl, lck, msi, worlds);.

不能通过传递多个参数来设置数组。

setState函数只能接受一个参数。

您应该按以下方式更改它：


newTournament = [lcs, lec, lpl, lck, msi, worlds];
console.log(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.log(newTournament);

如何过滤 api 数据并将名称打印到控制台？

How can I filter through api data and print name to console?

javascript

reactjs

react-hooks

TimeChart.js

我也试过的东西：

我也试过的东西：