Как получить данные из fetch-запроса и использовать их в React-компоненте?

Для получения данных из fetch-запроса и использования их в React-компоненте, вам нужно сначала отправить fetch-запрос в методе жизненного цикла компонента, например, в методе componentDidMount. Затем, после получения данных, обновите состояние компонента с помощью функции setState, чтобы отобразить полученные данные.

Пример кода:

```jsx
import React, { Component } from 'react';

class MyComponent extends Component {
  state = {
    data: null
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    const { data } = this.state;

    return (
      <div>
        {data ? <p>{data}</p> : <p>Loading...</p>}
      </div>
    )
  }
}

export default MyComponent;
```

Чтобы избежать ошибок при использовании функции fetch на объектах состояния в React, вам нужно учитывать, что setState может быть асинхронной операцией. Поэтому вам нужно убедиться, что вы обращаетесь к правильному объекту состояния в момент обновления данных из fetch-запроса. 

Вы можете использовать колбэк функцию в setState, чтобы гарантировать, что вы обновляете состояние с предыдущим состоянием, а не просто перезаписываете его.

Пример исправленного кода:

```jsx
import React, { Component } from 'react';

class MyComponent extends Component {
  state = {
    data: null
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState(prevState => ({ data: data })));
  }

  render() {
    const { data } = this.state;

    return (
      <div>
        {data ? <p>{data}</p> : <p>Loading...</p>}
      </div>
    )
  }
}

export default MyComponent;
```

Теперь при обновлении состояния вы используете предыдущее состояние (prevState), чтобы гарантировать корректное обновление данных.

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

useEffect(() => {
    getCharacters().then((data) => setDataCards(data));
}, []);
 
 
 Здесь мы изначально инициализируем dataCards как пустой массив (что логично, ведь данных пока что нет). При монтировании компонента сработает useEffect , внутри него мы получим данные и уже их сможем использовать в dataCards . 
 
 Кстати, обратите внимание, что вы указали настоящий ключ API.