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

Stack Overflow用户

提问于 2022-10-26 04:23:51

回答 1查看 37关注 0票数 1

我试图获取每个单独图像的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>

javascript

reactjs

腾讯特效SDK 2.5折起

美颜基础/原子能力套餐低至1500元/月，提供丰富的美化能力，支持全平台集成

回答 1

Stack Overflow用户

发布于 2022-10-26 04:38:34

我认为可能有两个问题：

-- map在setList调用中的结果是数组。如果您想要一个平面数组，可以在其上使用flat，或者以稍微不同的方式构建它。(另外，我建议不要以[null]开头，只是一个空白数组([])或null--在代码后面的if (list)中，null是有意义的。)元素对象的
，而不是all< code >E 214具有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]);

下面是一个示例(使用||而不是??，因为过时版本的Babel‘Stack代码段不理解??--在这个特定的情况下没关系，我们可以使用|| )：

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>