javascript - 在带有TypeScript的React中使用Promise Objects类型的组件创建数据

下面返回一个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;

最佳答案

您不应该直接在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>
  );

关于javascript - 在带有TypeScript的React中使用Promise Objects类型的组件创建数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60047369/