从axios获取特定数据获取请求

Question

我正在尝试获取每个单独图像的href，就像这样，我想显示的粗体href。

{
"collection": {
"href": "https://images-api.nasa.gov/search?q=moon",
"version": "1.0",
"items": [
{
"href": "https://images-assets.nasa.gov/image/PIA12235/collection.json",
"data": [ ... ],
"links": [
{
**"href": "https://images-assets.nasa.gov/image/PIA12235/PIA12235~thumb.jpg",**
"render": "image",
"rel": "preview"
}
]
}
]
}
}

这是我的密码。每当我试图在axios请求数据值中更进一步时，它都表示一切都是undefined。我很困惑为什么我不能map输出每个链接。

const { useState, useEffect } = React;
const Api = () => {
const api = "https://images-api.nasa.gov/search?q=moon";
const [list, setList] = useState([null]);
useEffect(() => {
axios.get(api).then((res) => {
setList(res.data.collection.items.map((item) => item.links));
});
}, [api]);
if (list) {
return (
<div>
<p>{console.log(list)}</p>
</div>
);
}
};
const Example = () => {
return <Api />;
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/axios@1.1.3/dist/axios.min.js"></script>

Answer 1

我认为可能有两个问题：

1. setList调用中map的结果是数组的数组。如果您想要一个平面阵列，请在其上使用flat，或者以稍微不同的方式构建它。(此外，我建议不要从[null]开始，只使用一个空白数组([](或null——考虑到代码后面的if (list)，null是有意义的。(
2. 在collection.items中，并非所有元素对象都具有links属性，因此map为这些项返回undefined。我们可以使用filter在事后过滤掉这些数组，或者提供空数组作为替代

下面是一个使用flat和过滤器的示例；由于您似乎想要href，我已经过滤掉了任何不是对象或没有href属性的元素：

const { useState, useEffect } = React;
const Api = () => {
const api = "https://images-api.nasa.gov/search?q=moon";
const [list, setList] = useState(null);
useEffect(() => {
axios.get(api).then((res) => {
setList(
res.data.collection.items.map((item) => item.links)
.flat()
.filter(e => typeof e === "object" && e.href)
);
});
}, [api]);
if (list) {
return (
<div>
<div>Links ({list.length}):</div>
{list.map(({href}, index) => <div key={href+"::"+index}>{href}</div>)}
</div>
);
}
};
const Example = () => {
return <Api />;
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/axios@1.1.3/dist/axios.min.js"></script>

如果你想在前进的过程中过滤掉它们，你可以使用零合并运算符，当item.links不存在时，提供一个空数组作为它的替代：

useEffect(() => {
axios.get(api).then((res) => {
setList(
res.data.collection.items.map((item) => item.links ?? [])
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^
.flat()
// ...and then no `filter` here...
);
});
}, [api]);

这里有一个例子(使用||而不是??，因为SO的Stack Snippets中过时的Babel版本不理解??——在这种特定情况下无关紧要，我们可以使用||(：

const { useState, useEffect } = React;
const Api = () => {
const api = "https://images-api.nasa.gov/search?q=moon";
const [list, setList] = useState(null);
useEffect(() => {
axios.get(api).then((res) => {
setList(
res.data.collection.items.map((item) => item.links || [])
.flat()
);
});
}, [api]);
if (list) {
return (
<div>
<div>Links ({list.length}):</div>
{list.map(({href}, index) => <div key={href+"::"+index}>{href}</div>)}
</div>
);
}
};
const Example = () => {
return <Api />;
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/axios@1.1.3/dist/axios.min.js"></script>