刷新页面后获取项出现错误

Question

我像往常一样从外部API获取数据，这是我这样做的典型方式:

获取API:

const [tshirts, setTshirts] = useState([]);
const fetchData = () => {
fetch('apiEndpoint')
.then((response) => response.json())
.then((data) => {
setTshirts(data[0].clothes.regular.top); // path to my array
})
.catch((error) => {
console.log(error);
});
};
React.useEffect(() => {
fetchData();
}, []);

映射数组:

const tshirtArray = tshirts.tShirt; // specifying the path
const listItems = tshirtArray.map((item) => <li>{item}</li>);
<ul>{listItems}</ul>

数据结构示例:

[
{
id: 1,
clothes: {
regular: {
top: {
sleeveless: [],
tShirt: [
"image-path-here"
],
.....
.....
.....

当我第一次执行的代码，它的工作，但过了一段时间或刷新页面后，我得到一个错误的TypeError:不能读取未定义的属性(读取'map')

为什么没有定义?路径是正确的，获取数组也应该正确。找不到不工作的原因。

Answer 1

我没有评论的声誉，所以让我试着通过一个答案为你澄清一下。正如@sojin提到的，你不能使用t恤。因为你的状态是数组类型的，数组不能像对象一样使用，这意味着如果有一个对象，比如exampleObject = {type: "shirt" color: "white}，你可以用exampleObject.type来调用它。因为你在你的状态中有一个对象数组(你保存到状态的顶部仍然是包含tShirt数组的对象)，你首先必须使用index(告诉你想从状态数组中使用哪个对象)，然后你可以像你想要的那样使用它。例如，在你的例子中，状态数组中有1个对象。数组索引从0开始。所以你可以做t恤[0]。从该对象获取tShirt数组。

但是，我会稍微编辑一下你的代码。而不是使用tshirtArray常量，只是从你的状态列表:

const listtiitems = t恤衫.map((item) =>

{item.tShirt [0]}

);

注意:我在这里只是使用索引0来演示查找tShirt数组中的第一项。如果你想看到所有的tShirt图像路径，那么你可能需要做嵌套映射或其他类似的解决方案。