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