Javascript 为什么我无法在React项目中映射数据？

我很快就会换钥匙的。使用下面的代码，我应该能够从API加载电影列表，并且每部电影都应该链接到它的提供商链接网站。使用 影片的细节。有人能帮我指出正确的方向吗？我觉得这与单击后重新渲染的组件有关

如果你想在这里修复代码沙盒，请看这里--

const key=“fde5ddeba3b7dec3fc1f51852ca0fb95”；
const getUpMovieDetail=（movieId）=>{
//const[movieId，setMovieId]=useState（[]）；
常量url=`https://api.themoviedb.org/3/movie/${movieId}/watch/providers？api_key=${key}`；
返回获取（url）；
};
函数UpMovieDetail（{movieItem}）{
const[searchLink，setSearchLink]=useState（null）；
useffect（（）=>{
getUpMovieDetail（movieItem.id）
.然后（（res）=>res.json（））
。然后（（res）=>{
设置搜索链接（res？.results？.US？.link）；
});
}，[movieItem.id]）；
返回(

{searchLink.map（（项目）=>

{item.title}

)}

);
}; 
常量搜索栏=（）=>{
const[search，setSearch]=useState（[]）；
const[input，setInput]=useState（“”）；
//输入字段
常量onUserInput=（{target}）=>{
设置输入（目标值）；
};
//Api调用
const SearchApi=（事件）=>{
const aUrl=”https://api.themoviedb.org/3/search/movie?api_key=fde5ddeba3b7dec3fc1f51852ca0fb95";
const newUrl=aUrl+'&query='+input；
event.preventDefault（）；
获取（新URL）
.then（（response）=>response.json（））
。然后（（数据）=>{
setSearch（数据、结果）；
})
.catch（（错误）=>{
console.log（'错误！！数据中断！：'，错误）
})
};
返回(
//标题
电影搜索盛典！
{/*输入字段和按钮表单*/}



电影快车搜索
与您的搜索相关的电影
{search.map（（项目）=>(
))}
)};
导出默认搜索栏```
[1]: http://codesandbox.io/s/movieapp-searchbar-forked-qv1o6
[2]: https://codesandbox.io/s/movieapp-searchbar-forked-qv1o6

从第一次渲染开始，它会抛出错误，因为

searchLink

为

null

。 试试这个：

{
  searchLink && searchLink.length && searchLink.map((item) =>
  ...
}

---

你的问题是什么？什么不起作用？与实际看到的相比，您希望看到什么？像

useState（）

这样的钩子必须在组件的顶层声明，而不是在其他函数中声明。如果useState没有空数组作为默认值，那么要异步获取数组数据，第一次渲染将尝试执行

undefined.map（）

并抛出error@Phil所以，当我在搜索栏中输入一部电影时，我应该得到一个20部电影的列表。每部电影都是一个带有标题的图像，每部电影图像也是一个链接，单击该链接可将您带到一个可以观看电影的网站。我得到的是searchLink.map不是函数错误。基本上…我想要我在这里所做的。。。但是我现在正在处理的那个需要连接到onClick事件，并且当单击搜索按钮时会搜索APi。

{
  searchLink && searchLink.length && searchLink.map((item) =>
  ...
}