React API获取解析承诺

Question

我有一个功能组件Users.js和一个单独的Api.js。下面的代码给了我错误：

// Function Users.js
useEffect(() => {
console.log(fetchUsers());
const data = fetchUsers();
setUsers(data);
//setUsers(fetchUsers());
}, []);
// Api.js
export const fetchUsers = async () => {
const data = await fetch('https://jsonplaceholder.typicode.com/users');
return await data.json();
};

我得到以下错误：

TypeError: users.map is not a function

这是因为我返回了一个promise，通过评估console.log(fetchUsers(((可以看到它。我该如何解决这个问题，因为只要我在函数中使用fetchUsers函数，而不是在单独的文件中，它就可以工作。。。

Answer 1

我试着更新你的代码，给你两个例子：

export default function App() {
const [users, setUsers] = useState();
useEffect(() => {
async function getData() {
const data = await fetchUsers();
setUsers(data);
}
getData()

}, []);
return (
<div className="App">
<h1>Hello CodeSandbox </h1>
{
(users || []).map(item => <span>{item.name}</span>)
}
</div>
);
}
export const fetchUsers = async () => {
const data = await fetch('https://jsonplaceholder.typicode.com/users');
return await data.json();
};

第二个比第一个好，我在函数中使用了.then((

export default function App() {
const [users, setUsers] = useState();
useEffect(() => {
fetchUsers().then(items => setUsers(items))

}, []);
return (
<div className="App">
<h1>Hello CodeSandbox </h1>
{
(users || []).map(item => <span>{item.name}</span>)
}
</div>
);
}

在这两种情况下，我都可以检索用户。我在一个文件中尝试过，但你当然可以把函数移到你喜欢的地方。

我建议您在渲染数据之前，检查用户数组是否存在(users || [](，或者给它一个默认的空数组值[users, setUsers] = useState([])

Answer 2

您可以处理返回的promise，然后设置状态。

fetchUsers().then((result) => setUsers(result));