错误：无法读取未定义的属性(读取"映射")

Question

我试图使用API在React中构建一个应用程序，当我试图在搜索输入上显示新闻时，它给了我一个错误:无法读取未定义的属性(读取'map')。

function Searched() {
const [searchedNews, setSearchedNews] = useState([]);
let params = useParams();
const getSearched = async (name) => {
const data = await fetch(
`https://newsapi.org/v2/top-headlines?apiKey=${process.env.REACT_APP_API_KEY}&q=${name}`
);
const news = await data.json();
setSearchedNews(news.searched);
};
useEffect(() => {
getSearched(params.search);
}, [params.search]);
return (
<Grid>
{searchedNews.map((item) => {
return (
<Card>
<img src={item.urlToImage} alt={item.title} />
<h4>{item.title}</h4>
</Card>
);
})}
</Grid>
);
}

当我尝试console.log news并搜索新闻时，它显示给我一个包含文章的数组，但是当我console.log(searchedNews)时，它显示给我一个空数组。

感谢您的宝贵时间!

Answer 1

top-headlines端点返回的对象如下:

{
"status": "ok",
"totalResults": 68,
"articles": [
/* articles here */
]
}

没有searched属性

你的代码应该是这样的:

const getSearched = async (name) => {
const data = await fetch(
`https://newsapi.org/v2/top-headlines?apiKey=${process.env.REACT_APP_API_KEY}&q=${name}`
);
const news = await data.json();
setSearchedNews(news.articles);
};

Answer 2

(如果您正在从api获取数据)

状态不会在前几次渲染中设置并且状态变量需要时间才有值

要避免错误，可以这样写searchedNews?.map((item)只需在searchedNews前面加一个问号它会运行得很好。问号使得map函数只在searchedNews具有某些值时才起作用。

当你的组件第一次呈现searchedNews时，它是一个空数组，map函数在它上面运行，给你一个错误。

对于console.log，您的console.log只会在前几次渲染时显示一个空数组，因为状态还没有设置，但是如果你使用一个带有searchedNews依赖的useEffect，当searchedNews的值被改变时，它会重新渲染组件。

希望这对你有帮助。