<div id="root">
</div>
console.clear()
const App = () => {
const [ users, setUsers ] = React.useState([]);
const getData = async () => {
// 有時候會發生 CORS,只需要重新整理即可
const { data } = await axios.get('https://randomuser.me/api/?results=10');
setUsers(data.results);
}
React.useEffect(() => {
getData()
}, []);
return (
<div>
<ul>
{
users.map((user) => (
<li key={user.email}>
{ user.name.first + user.name.last }
</li>
))
}
</ul>
</div>
)
}
const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(<App />);
View Compiled
This Pen doesn't use any external CSS resources.