收到TypeError：无法在React中读取未定义的属性'map'

Question

我已经向News API发出了GET请求，并接收了作为对象的数据。由于map方法只能在数组上工作，因此我在data.articles上使用map，因为它是一个数组。 （在第22行的控制台日志中选中）。

话虽如此，我不明白为什么我仍会收到

TypeError无法读取未定义的属性“地图”

https://codesandbox.io/s/elated-star-j9s8g?file=/src/App.js

function App() {
  const [apiUrl] = useState("https://gnews.io/api/v3/search?");
  const [apiKey] = useState("123456789");
  const [data, setData] = useState([]);
  const [query, setQuery] = useState("");
  const [url, setUrl] = useState(
    `https://gnews.io/api/v3/top-news?token=95e7679f627d5796aa24f6692def5df3`
  );

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(url);
      setData(result.data);
    };
    fetchData();
  }, [url]);

  const searchHandler = () => {
    setUrl(`${apiUrl}q=${query}&token=${apiKey}`);
    console.log(data.articles);
  };

  let newsNodes = data.articles.map((item) => {
    return (
      <li key={item.publishedAt}>
        <a href={item.url}>{item.title}</a>
      </li>
    );
  });

  return (
    <>
      <input
        type="text"
        value={query}
        onChange={(event) => setQuery(event.target.value)}
      />
      <button type="button" onClick={searchHandler}>
        Search
      </button>
      <ul>{newsNodes}</ul>
    </>
  );
}

Answer 1

在传递给useState的初始值中，将data初始化为[]，而[].articles为undefined。

Answer 2

如其他人所述，当组件最初被渲染时，data.articles是未定义的。如果您在map

之前记录数据，这很明显

您可能有一个条件来检查它是否未定义，只有这样，您才能继续进行map

let newsNodes = data.articles && data.articles.map((item) => {
  return (
    <li key={item.publishedAt}>
      <a href={item.url}>{item.title}</a>
    </li>
  );
});