TypeError: Cannot read property 'map' of undefined while fetching from API
TypeError: Cannot read property 'map' of undefined while fetching from API
我一直在尝试做一个简单的 API 获取,但我不明白我做错了什么
我已经阅读了很多问题,但我真的觉得我错过了一些东西,因为一切似乎都是正确的(显然不是)
import { useState } from "react";
import ProductCard from "./ArticleCard/ProductCard.js";
export default function ProductsIndex() {
const [searchText, set_searchText] = useState("");
const [state, set_state] = useState({ status: "idle" });
const search = async () => {
if (searchText === "") {
set_state({ status: "idle" });
return;
}
set_state({ status: "searching" });
const queryParam = encodeURIComponent(searchText);
const data = await fetch(
/* base browser fetch https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch*/
`https://omdbapi.com/?apikey=6a06f383&s=${queryParam}`
).then((r) => r.json());
set_state({ status: "done!", data: data.Search });
};
console.log(state.data);
return (
<div className="ProductsIndex">
We sell movies for a high price.
<h1>Discover some movies!</h1>
<p>
<input
value={searchText}
onChange={(e) => set_searchText(e.target.value)}
/>
<button onClick={search}>Search</button>
</p>{" "}
<p>
{state.data.map((movie) => (
<ProductCard
poster={movie.poster}
title={movie.title}
year={movie.year}
type={movie.type}
/>
))}
</p>
</div>
);
}
console.log(state.data) 给出了想要的结果,所以就好像数据没有被传递一样..我不明白为什么
来自 console.log(state.data) 的结果:
[
{
"Title": "Finding Nemo",
"Year": "2003",
"imdbID": "tt0266543",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BZTAzNWZlNmUtZDEzYi00ZjA5LWIwYjEtZGM1NWE1MjE4YWRhXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX300.jpg"
},
{
"Title": "Finding Nemo",
"Year": "2003",
"imdbID": "tt0401422",
"Type": "game",
"Poster": "https://m.media-amazon.com/images/M/MV5BNGEzMjdiZGEtYzU3ZC00OGFmLWI3NTgtZTcyNTFjYTliNDg5XkEyXkFqcGdeQXVyNjExODE1MDc@._V1_SX300.jpg"
},
{
"Title": "Finding Nemo Submarine Voyage",
"Year": "2007",
"imdbID": "tt1319713",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BMzAxMzMyODQtNWY0Yy00N2M3LWE5MDQtZDUzNjc1ZGFmMzA4XkEyXkFqcGdeQXVyMzkxMzc4Mw@@._V1_SX300.jpg"
},
{
"Title": "Finding Nemo: Studio Tour of Pixar",
"Year": "2003",
"imdbID": "tt1248974",
"Type": "movie",
"Poster": "N/A"
},
{
"Title": "Finding Nemo: A Filmmakers' Roundtable",
"Year": "2012",
"imdbID": "tt10255922",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BNjAyMTBmODQtZGYxMC00NjdhLThhN2MtODlhMDI4NTczYTMyXkEyXkFqcGdeQXVyNDEyNjEzOTg@._V1_SX300.jpg"
}
]
感谢您的帮助
你应该初始化 state.data
像这样尝试。
const [state, set_state] = useState({ status: "idle",data:[] });
我刚刚解决了几件事:
- 定义数据的状态
const [state, set_state] = useState({ status: "idle",data:[] });
迭代前检查你的数组
{state.data && state.data.map((movie) => (
<ProductCard
poster={movie.poster}
title={movie.title}
year={movie.year}
type={movie.type}
/>
))}
我创建了一个小演示:搜索 nemo,按下按钮,请检查控制台,https://codesandbox.io/s/flamboyant-dubinsky-3bxsf?file=/src/App.js:155-219
我想我明白问题所在了!!!
当您设置新状态时,它会替换之前的状态。
考虑到这一点,当您像这样设置加载状态时:
set_state({ status: "idle" });
它实际上使您的 state.data
未定义,因此它抛出异常。
与其重新分配整个状态,不如尝试仅替换需要更改的内容:
set_state({ ...state, status: "idle" });
因此,无论何时调用您的 set_state 方法,您都应该添加您的 ...state
,这样您就不会遇到这个问题。
我一直在尝试做一个简单的 API 获取,但我不明白我做错了什么 我已经阅读了很多问题,但我真的觉得我错过了一些东西,因为一切似乎都是正确的(显然不是)
import { useState } from "react";
import ProductCard from "./ArticleCard/ProductCard.js";
export default function ProductsIndex() {
const [searchText, set_searchText] = useState("");
const [state, set_state] = useState({ status: "idle" });
const search = async () => {
if (searchText === "") {
set_state({ status: "idle" });
return;
}
set_state({ status: "searching" });
const queryParam = encodeURIComponent(searchText);
const data = await fetch(
/* base browser fetch https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch*/
`https://omdbapi.com/?apikey=6a06f383&s=${queryParam}`
).then((r) => r.json());
set_state({ status: "done!", data: data.Search });
};
console.log(state.data);
return (
<div className="ProductsIndex">
We sell movies for a high price.
<h1>Discover some movies!</h1>
<p>
<input
value={searchText}
onChange={(e) => set_searchText(e.target.value)}
/>
<button onClick={search}>Search</button>
</p>{" "}
<p>
{state.data.map((movie) => (
<ProductCard
poster={movie.poster}
title={movie.title}
year={movie.year}
type={movie.type}
/>
))}
</p>
</div>
);
}
console.log(state.data) 给出了想要的结果,所以就好像数据没有被传递一样..我不明白为什么
来自 console.log(state.data) 的结果:
[
{
"Title": "Finding Nemo",
"Year": "2003",
"imdbID": "tt0266543",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BZTAzNWZlNmUtZDEzYi00ZjA5LWIwYjEtZGM1NWE1MjE4YWRhXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX300.jpg"
},
{
"Title": "Finding Nemo",
"Year": "2003",
"imdbID": "tt0401422",
"Type": "game",
"Poster": "https://m.media-amazon.com/images/M/MV5BNGEzMjdiZGEtYzU3ZC00OGFmLWI3NTgtZTcyNTFjYTliNDg5XkEyXkFqcGdeQXVyNjExODE1MDc@._V1_SX300.jpg"
},
{
"Title": "Finding Nemo Submarine Voyage",
"Year": "2007",
"imdbID": "tt1319713",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BMzAxMzMyODQtNWY0Yy00N2M3LWE5MDQtZDUzNjc1ZGFmMzA4XkEyXkFqcGdeQXVyMzkxMzc4Mw@@._V1_SX300.jpg"
},
{
"Title": "Finding Nemo: Studio Tour of Pixar",
"Year": "2003",
"imdbID": "tt1248974",
"Type": "movie",
"Poster": "N/A"
},
{
"Title": "Finding Nemo: A Filmmakers' Roundtable",
"Year": "2012",
"imdbID": "tt10255922",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BNjAyMTBmODQtZGYxMC00NjdhLThhN2MtODlhMDI4NTczYTMyXkEyXkFqcGdeQXVyNDEyNjEzOTg@._V1_SX300.jpg"
}
]
感谢您的帮助
你应该初始化 state.data
像这样尝试。
const [state, set_state] = useState({ status: "idle",data:[] });
我刚刚解决了几件事:
- 定义数据的状态
const [state, set_state] = useState({ status: "idle",data:[] });
迭代前检查你的数组
{state.data && state.data.map((movie) => ( <ProductCard poster={movie.poster} title={movie.title} year={movie.year} type={movie.type} /> ))}
我创建了一个小演示:搜索 nemo,按下按钮,请检查控制台,https://codesandbox.io/s/flamboyant-dubinsky-3bxsf?file=/src/App.js:155-219
我想我明白问题所在了!!! 当您设置新状态时,它会替换之前的状态。 考虑到这一点,当您像这样设置加载状态时:
set_state({ status: "idle" });
它实际上使您的 state.data
未定义,因此它抛出异常。
与其重新分配整个状态,不如尝试仅替换需要更改的内容:
set_state({ ...state, status: "idle" });
因此,无论何时调用您的 set_state 方法,您都应该添加您的 ...state
,这样您就不会遇到这个问题。