Создание компонента с данными типа Promise Objects в React с использованием TypeScript - PullRequest
Новая
       4

Создание компонента с данными типа Promise Objects в React с использованием TypeScript

0 голосов
/ 04 февраля 2020

Ниже возвращается объект типа Promise, и произошла ошибка, которая

Ошибка: объекты недопустимы как дочерний элемент React (найдено: объект с ключами {key1, key2, key3 ...} ...

Как это решить? 

// Component.tsx
import React, { useState, useEffect } from 'react';

function Jobs() {
  const [result, setResult] = useState([]);

  const request = async () => {
    const response = await fetch(
      'https://api/v1/',
      {
        method: 'GET',
        headers: {
          Authorization:
            'Bearer asdfasdfasdfasdfasdfasdfasdfasdfasdf',
        },
      }
    );
    const data = await response.json();
    setResult(data);
    return data
  };

  useEffect(() => {
    console.log('rendering finished!');
    request();
  },[]);


  return (
    <div>
      <li>{result}</li>
    </div>
  );
}

export default Jobs;

1 Ответ

1 голос
/ 04 февраля 2020

Вы не должны напрямую отображать объекты внутри jsx 

// The direct calling of result is the culprit

return (
    <div>
      <li>{result}</li>
    </div>
  );

Вместо этого вы должны отобразить это значение: 

 return (
    <div>
        <ul>{result.map(v => (
          <li>{v.title}</li>
          )}
        </ul>
     </div>
    )

или если вы действительно хотите консоль, записывайте значения результат проверить. Вы можете или console.log это за пределами 

...
console.log(result)
...
return (
  <div />
);

или внутри 

 return (
    <div>
      <li>{console.log(result)}</li>
    </div>
  );
...