如何在反应中从数据数组访问对象

Question

我有以下钩子

import { useState, useEffect } from "react";
export default function FetchData(url) {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch(url)
            .then(response => response.json())
            .then(data => setData(data));
    }, []);

    return data;
}

我通过编写以下代码调用了这个钩子

const data = FetchData("https://hn.algolia.com/api/v1/search");

之前的 API 不直接在数据中返回带有“命中”的结果

问题是当我编写以下代码时：

return (
          data.hits.map(hit =>
                    <div>{hit.title}</div>
                )

              );

我知道我可以通过在 hook 中添加 "hits" 来解决这个问题，但我不想这样做，因为我需要 hook 是通用的。 我需要在调用部分而不是在 hook 中操作数据。 更具体地说，如何从调用上下文而不是从钩子访问命中数据。

Answer 1

试试这一行：

 return (
           data && data.hits && data.hits.map(hit => <div>{hit.title}</div>)
         );