undefined 不是对象 axios

Question

当我尝试在 AXIOS 中使用 GET 方法时出现此错误。在底部我放了一个没有样式的代码 sn-p。想要使用 AXIOS 从 API 中获取数据。我是新手，不太清楚如何正确执行此操作。

undefined 不是对象（评估 'data.map'）

代码：

import React, {useState, useEffect} from 'react';
import axios from 'axios';

const HomeScreen = ({navigation}) => {

    const [categoryIndex, setCategoryIndex, data, setData] = useState([])

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(
                'https://hn.algolia.com/api/v1/search?query=redux',
            );
            setData(result.data);
        };
        fetchData();
    }, []);

    return (
        <SafeAreaView
            <ul>
                {data.map(item => (
                    <li key={item.objectID}>
                        <a href={item.url}>{item.title}</a>
                    </li>
                ))}
            </ul>
        </SafeAreaView>
    );
};

export default HomeScreen;

Answer 1

• 您好，您的数据不符合您的预期。还存在“命中”变量，我认为您想显示该数据。
• 在第一次渲染中，它正在尝试映射您的数据，但在尝试映射时未填充数据。
• 另外，你应该重新检查“useState”的用法。
• 并且您需要在映射它之前检查数据是否存在（data?.hits）。
• 您忘记关闭 SafeAreaView 标记。

https://reactjs.org/docs/hooks-state.html

https://codesandbox.io/s/ancient-fast-pdqhy?file=/src/TestApp.jsx

如果你粘贴它，它将正常工作：

import React, { useState, useEffect } from "react";
import axios from "axios";

const HomeScreen = ({ navigation }) => {
  const [data, setData] = useState([]);
  const [categoryIndex, setCategoryIndex] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        "https://hn.algolia.com/api/v1/search?query=redux"
      );
      console.log(result);
      setData(result.data);
    };
    fetchData();
  }, []);

  return (
    <SafeAreaView>
      <ul>
        {data?.hits &&
          data.hits.map((item) => (
            <li key={item.objectID}>
              <a href={item.url}>{item.title}</a>
            </li>
          ))}
      </ul>
    </SafeAreaView>
  );
};

export default HomeScreen;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>