在 React 作业中,我试图从 randomuser.me API 获取用户详细信息并将其显示在另一个组件上。除了无法从其 id 中获取用户详细信息外,一切都已完成
AdminPanel.js
<TableBody>
{results.map((person) => (
<TableRow key={person.id.value}>
<TableCell component="th" scope="row">{person.name.first}</TableCell>
<TableCell align="right">{person.name.last}</TableCell>
<TableCell align="center">{person.location.street.name + ',' + person.location.street.number + ',' + person.location.state + ',' + person.location.country }</TableCell>
<TableCell align="right"><img src={person.picture.thumbnail} /></TableCell>
<TableCell align="center">{person.email}</TableCell>
<TableCell align="right">{person.dob.date}</TableCell>
<TableCell align="right">
<Button variant="contained" color="primary" >
<Link style={{color:'white'}} to={`/user-detail/${person.login.uuid}`}>View Details</Link>
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
点击链接后它会重定向到另一个页面
用户详细信息
import React, {useEffect} from 'react'
import { useParams } from 'react-router-dom';
export const UserDetail = () => {
const {userid} = useParams()
useEffect(() => {
fetch(`/user-detail/${userid}`).then(res=>res.json()).then(result=> {
console.log(result)
})
}, [])
return (
<div>
</div>
)
}
但是,当控制台日志显示此错误时'Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0'
我做错了什么?
答案 0 :(得分:0)
获取网址
fetch (`https://randomuser.me/api/?seed=${seed}`). then (d=>d.json()).then(e=>console.log(e))
其中种子是一个字符串
const seed ="fea8be3e64777240"
答案 1 :(得分:0)
你需要使用状态来获取结果
import React, {useState, useEffect} from 'react'
import { useParams } from 'react-router-dom';
export const UserDetail = () => {
const {userid} = useParams()
const [result, setResult] = useState([]);
useEffect(() => {
fetch(`/user-detail/${userid}`).then(res=>res.json()).then(result=> {
console.log(result)
setResult(result);
})
}, [])
return (
<div>
</div>
)
}
答案 2 :(得分:0)
如果您有兴趣生成具有详细信息的随机用户,则可以使用另一个免费 API。
API:https://wirespec.dev/Wirespec/projects/apis/Stackoverflow/apis/getUserDetails
端点:https://api.wirespec.dev/wirespec/stackoverflow/getuserdetails?id=100
Wirespec 可让您创建多达 100 万个随机用户,包括头像。在以下位置查看: