У вас используется асинхронная функция, которая возвращает
промис. Соответственно, результата её выполнения нужно сначала дождаться. Поэтому
getCharacters().data === undefined
, и уже даже из этого очевидно, что
getCharacters().data.results
приведёт к ошибке, т.к. это попытка обратиться к свойству у
undefined
.
Вашу проблему можно решить, используя хук
useEffect
с пустым массивом зависимостей, благодаря чему он сработает только при монтировании/размонтировании компонента:
const [dataCards, setDataCards] = useState([]);
useEffect(() => {
getCharacters().then((data) => setDataCards(data));
}, []);
Здесь мы изначально инициализируем
dataCards
как пустой массив (что логично, ведь данных пока что нет). При монтировании компонента сработает
useEffect
, внутри него мы получим данные и уже их сможем использовать в
dataCards
.
Кстати, обратите внимание, что вы указали настоящий ключ API.