我正在使用 NHL api 來嘗試獲取給定賽季的球員統計資料。我有這些季節值的效用函式：
export const seasonOptions = [
{ value: "19861987", label: "1986/1987" },
{ value: "19871988", label: "1987/1988" },
{ value: "19881989", label: "1988/1989" },
{ value: "19891990", label: "1989/1990" },
{ value: "19901991", label: "1990/1991" },
{ value: "19911992", label: "1991/1992" },
{ value: "19921993", label: "1992/1993" },
{ value: "19931994", label: "1993/1994" },
{ value: "19941995", label: "1994/1995" },
{ value: "19951996", label: "1995/1996" },
];
... 等等。在我的組件中，我有這個狀態來設定選擇的內容：
const [select, setSelect] = useState(seasonOptions[seasonOptions.length - 1]);
const handler = (selected) => {
setSelect((select) => select);
handlePlayerStats(
`https://statsapi.web.nhl.com/api/v1/people/${props.playerId}/stats?stats=statsSingleSeason&season=${selected.value}`
);
}
};
<Select
id="select"
instanceId={"select"}
options={seasonOptions}
placeholder={select.label}
autoFocus
value={select.value}
onChange={handler}
/>
呼叫此自定義鉤子：
const handlePlayerStats = async (url) => {
try {
const req = await fetch(url).then((response) => response.json());
console.log(req);
if (req.messageNumber) {
setFetchedData([]);
} else if (req.stats[0].splits.length > 0) {
setFetchedData(req);
}
} catch (error) {
console.log(error);
}
};
我不確定如何動態回圈遍歷所有 seasonOptions 并過濾掉 req.stats[0].splits.length === 0 的每個季節？
這是任何好奇的人的代碼框鏈接：https ://codesandbox.io/s/friendly-kapitsa-c97rzy?file=/components/PlayerStats.js:357-855
uj5u.com熱心網友回復：
回答問題的第一部分，您可以使用此方法映射此物件陣列，例如使用.map方法
反應代碼沙盒
MDN-.map() 方法 JS
export const seasonOptions = [
{ value: 8471214, label: "198601987" },
{ value: 8471215, label: "198701988" },
{ value: 8471216, label: "198801989" },
{ value: 8471217, label: "198901990" },
{ value: 8471218, label: "199001991" },
{ value: 8471219, label: "199101992" },
{ value: 8471220, label: "199201993" },
{ value: 8471221, label: "199301994" },
{ value: 8471222, label: "199401995" },
{ value: 8471223, label: "199501996" },
];
//MAKE SURE TO MAP OVER THE <option></option> tag not the <Select/>
//CHECK CODE SANDBOX FOR EXAMPLE IN PURE HTML5 AND REACT
{seasonOptions.map((option,index)=>
<Select
key={index}
id="select"
instanceId={"select"}
options={option?.value}
placeholder={option?.label}
autoFocus
value={select.value}
onChange={handler}
/>
)}
在此處查看我的答案或此處的其他示例，如何映射陣列并訪問它的值此方法只是許多中的一種。
如何從 JavaScript 中的陣列物件中查找值？堆疊溢位問題
對于問題的第二部分，您可以使用新的沙盒
- 腳步
通過洗掉引號將
value此處的屬性從 a更改string為 anumberexport const seasonOptions = [{value: 8471214, label: "198601987"},]分配一個
useState鉤子來處理活動的過濾專案const [activeFilter, setActiveFilter] = useState([]);
3.分配一個箭頭函式來處理使用setTimeOut()方法setTimeout()-MDN-DOCS過濾季節 在哪里500執行該函式的時間和
const handleSeasonsFilter = (item) => {
setActiveFilter(item);
setTimeout(() => {
if (!item) {
setFilterSeasons(item);
} else {
setFilterSeasons(
seasonOptions.filter((season) =>
seasonOptions?.includes(season?.label)
)
);
}
}, 500);
};
將其傳遞給在沙盒中搜索 API
url = `https://statsapi.web.nhl.com/api/v1/people/${activeFilter}/stats?stats=statsSingleSeason&season=200402005的Line 65url使用鉤子顯示它們
useEffect()還添加依賴陣列中的值或將其留空以避免無限回圈。
useEffect(() => {
//debug data
console.log(stringDataDisplay);
setActiveFilter(activeFilter);
//DEBUG IF VALUE IF PASSED
//setDatasearched(activeFilter);
}, [
/**EMPTY DEPENDENCY ARRAY TO AVOID INFINITE LOOPS */
stringDataDisplay,
activeFilter
]);
在我的示例中，我使用另一個useStateHook 和 State 操作顯示了它們
const [datasearched, setDatasearched] = useState([])
& 最后只是在這里分配了一個新const stringDataDisplay = JSON.stringify([datasearched]);
的來對[datasearched]陣列進行字串化。
注意
確保將handleSeasonsFiltertoOnClick作為空箭頭函式傳遞，并將option.value屬性作為字串傳遞，以便 API 接受請求。
希望這對您的示例有所幫助，我也會嘗試使用您的方法檢查代碼沙箱。
請記住，我仍在開發此功能，并且我了解您希望在未選擇任何玩家 ID 時顯示季節值我正確嗎？
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/513832.html
上一篇：使用條件渲染陣列資料