TypeError:data.map不是一个函数，当没有定义api调用和名为id的错误时，我得到了一个错误

Question

我想在点击按钮的同时导航到其他页面，同时点击按钮，我还必须调用api.但它不起作用，有人能告诉我问题是什么吗[its-api链接][1]：https://api.tvmaze.com/shows/$%7Bid%7D是我的联系人组件

import React,{useState,useEffect} from 'react';
import axios from 'axios';
export const Contact = () => {
const url = `https://api.tvmaze.com/shows/${id}`;
const [data, setData] = useState([]);
useEffect(() => {
axios.get(url).then((json) => setData(json.data));
}, []);
const renderTable = () => {
return data.map((user, i) => {
return (
<tr key={i}>
<td>{user.show?.name}</td>
<td>{user.show?.language}</td>
<td>{user.show?.genres}</td>
<td>{user.show?.runtime}</td>
<td>{user.show?.premiered}</td>
<td>{user.show?.rating?.average}</td>
<td>{user.show?.network?.country?.name}</td>
<td>
<img src={user?.show?.image?.medium} alt="poster" />
</td>
</tr>
);
});
};
return (
<div>
<table className=" table table-bordered">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">language</th>
<th scope="col">genres</th>
<th scope="col">runtime</th>
<th scope="col">premiered</th>
<th scope="col">Rating</th>
<th scope="col">country name</th>
<th scope="col">image</th>
</tr>
</thead>
<tbody>{renderTable()}</tbody>
</table>
</div>
);
};

Answer 1

这里你可以使用这个，不会发生错误

const renderTable = () => {
return data && data.length > 0 &&  data.map((user, i) => {
return (
<tr key={i}>
<td>{user.show?.name}</td>
<td>{user.show?.language}</td>
<td>{user.show?.genres}</td>
<td>{user.show?.runtime}</td>
<td>{user.show?.premiered}</td>
<td>{user.show?.rating?.average}</td>
<td>{user.show?.network?.country?.name}</td>
<td>
<img src={user?.show?.image?.medium} alt="poster" />
</td>
</tr>
);
});
};

Answer 2

我认为问题出在api和这里的id 中

常量url＝`https://api.tvmaze.com/shows/${id}

您在哪里声明了id？并在使用它之前确保数据是正确的第一控制台.log((响应数据，看看你得到了什么，打开网络选项卡，清楚地看到错误的原因