我對 React 有點陌生，我發現自己正在嘗試撰寫一個我遇到的挑戰。問題是，我正在遵循我已經完成的專案的課程，但使用相同的方法。搜索欄和結果串列。但是我遇到了一個我以前沒有遇到過的奇怪問題。在測驗代??碼時，我想在使用 axios 搜索結果后檢查陣列的長度。重新加載時，狀態可以正常作業一秒鐘，但無法解決我自己無法弄清楚的“英雄”的未定義錯誤。我只有在使用條件渲染時才能使用它，而且我什至不知道為什么當我將{heroes.length}更改為{heroes && hero.length}時它會起作用，但是在嘗試映射串列時會產生另一個問題名稱和狀態也不適用。 setHeroes是問題所在，但不知道為什么會這樣。
import SearchBar from "./SearchBar";
import superApi from "./api/superApi";
function Home() {
const [heroes, setHeroes] = useState([]);
useEffect(() => {
onTermSubmit();
}, []);
const onTermSubmit = async (hero) => {
const response = await superApi.get(`/search/${hero}`);
console.log(response.data.results);
setHeroes(response.data.results);
};
return (
<div>
<SearchBar onFormSubmit={onTermSubmit} />
There are {heroes.length} heroes with that name
</div>
);
}
export default Home;
uj5u.com熱心網友回復：
我認為問題出在 async 函式上。
我似乎您的回復未定義（或 response.data.results）。
這就是為什么當您使用 hero && hero.length 應用程式不會崩潰的原因，因為它從不運行 length 方法。
如果您可以發布您的 console.log 結果，我可以進一步提供幫助
uj5u.com熱心網友回復：
而不是直接設定狀態值而不檢查
setHeroes(response.data.results);
使用可選鏈接和空合并運算子進行檢查。
setHeroes(response?.data?.results ?? []);
或者
if (response && response.data && Array.isArray(response.data)) {
setHeroes(response.data.results);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/334452.html
標籤：反应