我正在嘗試為我的 API 撰寫一個前端，但我在某個時候卡住了，無法找出解決方案。我遇到的問題是我的“getResult”無法在渲染時呼叫地圖函式。我嘗試了一切，但最終一無所獲。
所以我的 Filter 組件如下所示。在渲染結束時，我實作了在此代碼塊之后給出的 GameTable 組件。
import React, { useState, useEffect } from 'react'
import { useQuery } from 'react-query';
import gameService from '../services/gameService'
import GameTable from './GameTable'
import '../App.css'
const Filter = () => {
const [getName, setGetName] = useState("")
const [getGenre, setGetGenre] = useState("")
//const [getPublisher, setGetPublisher] = useState("")
const [metadata,setMetadata] = useState([])
const [getResult, setGetResult] = useState([])
const fortmatResponse = (res) => {
return JSON.stringify(res,null, 2);
}
const {isLoading: isLoadingGames, refetch: getAllGames} = useQuery("query-games",
async() => {
return await gameService.get("/games");
},
{
enabled: false,
onSuccess: (res) => {
const result = {
status : res.status "-" res.statusText,
headers: res.headers,
data: res.data,
};
setMetadata(fortmatResponse(result.data.metadata));
setGetResult(fortmatResponse(result.data.games));
},
one rror : (err) => {
setGetResult(fortmatResponse(err.response?.data || err));
},
}
);
useEffect(() => {
if (isLoadingGames) setGetResult("loading...");
},[isLoadingGames]);
function getAllData() {
try{
getAllGames();
}catch(err) {
setGetResult(fortmatResponse(err));
}
}
const {isLoading: isLoadingGame, refetch: getGamesByName} = useQuery(
"query-games-by-name",
async () => {
return await gameService.get(`/games?name=${getName}`);
},
{
enabled: false,
onSuccess: (res) => {
const result = {
status : res.status "-" res.statusText,
headers: res.headers,
data: res.data,
};
setMetadata(fortmatResponse(result.data.metadata));
setGetResult(fortmatResponse(result.data.games));
},
one rror : (err) => {
setGetResult(fortmatResponse(err.response?.data || err));
},
}
);
useEffect(() => {
if (isLoadingGame) setGetResult("loading...");
}, [isLoadingGame]);
function getDataByName() {
if (getName) {
try {
getGamesByName();
} catch (err) {
setGetResult(fortmatResponse(err));
}
}
}
const {isLoading: isSearchingGame, refetch: findGamesByGenre} = useQuery(
"query-games-by-genre",
async () => {
return await gameService.get(`/games?genre=${getGenre}`);
},
{
enabled: false,
onSuccess: (res) => {
const result = {
status : res.status "-" res.statusText,
headers: res.headers,
data: res.data,
};
setMetadata(fortmatResponse(result.data.metadata));
setGetResult(fortmatResponse(result.data.games));
},
one rror : (err) => {
setGetResult(fortmatResponse(err.response?.data || err));
},
}
);
useEffect(() => {
if (isSearchingGame) setGetResult("loading...");
}, [isSearchingGame]);
function getDataByGenre() {
if (getGenre) {
try {
findGamesByGenre();
} catch (err) {
setGetResult(fortmatResponse(err));
}
}
}
const clearGetOutput =() => {
setGetResult([]);
}
console.log(metadata)
return(
<div className='card'>
<div className='card-header input-group-sm'> GET Request </div>
<div className='card-body'>
<div className='input-group input-group-sm'>
<button className='btn btn-sm btn-primary' onClick={getAllData}>
Get All
</button>
<input
type="text"
value={getName}
onChange={(e) => setGetName(e.target.value)}
className='form-control ml-2'
placeholder='Name'
/>
<div className='input-group-append'>
<button className="btn btn-sm btn-primary" onClick={getDataByName}>
Get by Name
</button>
</div>
<input
type="text"
value={getGenre}
onChange={(e) => setGetGenre(e.target.value)}
className="form-control ml-2"
placeholder="Genre"
/>
<div className="input-group-append">
<button className="btn btn-sm btn-primary" onClick={getDataByGenre}>
Find By Genre
</button>
</div>
<button className="btn btn-sm btn-warning ml-2" onClick={clearGetOutput}>
Clear
</button>
</div>
<GameTable games={getResult} />
</div>
</div>
)
}
export default Filter;
這是我的 GameTable.js
import React from 'react'
import Game from './Game'
import '../App.css'
const GameTable = ({games}) => {
return (
<div className="table-wrapper">
<h2>Games</h2>
<table className='fl-table'>
<thead>
<tr>
<th> Name </th>
<th> Genre </th>
<th> Publisher </th>
</tr>
</thead>
<tbody>
{
games.map(game =>
<Game key={game.id} game={game} />
)
}
</tbody>
</table>
</div>
)
}
export default GameTable;
Game.js 如下。
import React from 'react'
const Game = ({game}) => {
return (
<tr>
<td>{game.name}</td>
<td>{game.genre}</td>
<td>{game.publisher_name}</td>
</tr>
)
}
export default Game
我相信這對你們中的一些人來說非常簡單，但我真的堅持了下來。任何幫助和提示將不勝感激。謝謝。
我已將初始狀態從 null 更改為 [] 但這沒有幫助。
uj5u.com熱心網友回復：
你在這里呼叫.map()你的GameTable組件：
games.map(game =>
<Game key={game.id} game={game} />
)
.map()是陣列上的一個函式，所以這只適用于 games` 是一個陣列。
是嗎？
它來自組件道具：
const GameTable = ({games}) => {
并作為 prop 從父組件傳遞：
<GameTable games={getResult} />
那是什么getResult？它被初始化為一個陣列：
const [getResult, setGetResult] = useState([])
這樣在第一次渲染時就可以正常作業。但是你在哪里打電話setGetResult，你把它設定成什么？事實證明，您幾乎到處都可以呼叫它。例如，這里你將它設定為一個字串：
setGetResult("loading...")
字串不是陣列，所以這會失敗。您還可以在此處將其設定為字串：
setGetResult(fortmatResponse(result.data.games))
即fortmatResponse回傳一個字串。字串不是陣列，所以這會失敗。您還將其設定為...此處的內容：
setGetResult(fortmatResponse(err.response?.data || err))
基本上，您將getResult其用作您可能希望存盤在某處的任何和所有可能資料的通用占位符。因此，.map()只要資料不是陣列，操作就會失敗。
洗掉您設定getResult為字串的所有實體。如果您有一個資料陣列，請將其設定為該陣列：
setGetResult(result.data.games)
但將其保留為陣列。將其保留為您想要的資料。（并選擇一個更好的名稱，例如“游戲”之類的名稱，以表明該資料的含義。這將有助于防止您在自己的代碼中感到困惑。）
基本上...如果您的值應該是一個陣列，請將其保留為一個陣列。代碼不一定失敗，您只是使用了不一致的資料。
uj5u.com熱心網友回復：
您必須在地圖的回呼中添加“回傳”
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/533618.html