undefined is not an object axios-CodePudding

I'm getting this error when i try to use GET method in AXIOS. At the bottom I put a code snippet without style. Wants to grab data from the API using AXIOS. I'm new and don't quite know how to do this correctly.

undefined is not an object (evaluating 'data.map')

code:

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;

CodePudding user response：

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

const HomeScreen = ({navigation}) => {

    const [categoryIndex, setCategoryIndex] = useState([]) // remove this if you're not using it
    const [data, setData] = useState([])

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

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

export default HomeScreen;

CodePudding user response：

Hi, your data is not like you expected. There is also "hits" variable that exists, I think you want to show that data.
In the first render, it's trying to map your data but data was not filled when trying to map it.
Also, you should be re-examined "useState" usage.
And you need to check if data exist before the map it (data?.hits).
And you forgot to close the SafeAreaViewtag.

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

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

If you paste this it will work correctly:

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>