Javascript 如何从randomuser API获取用户的详细信息？

在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>

{results.map（（person）=>(
{person.name.first}
{person.name.last}
{person.location.street.name+'、'+person.location.street.number+'、'+person.location.state+'、'+person.location.country}
{person.email}
{个人出生日期}
查看详细信息
))}

单击链接后，它会重定向到另一个页面，如下所示：

用户详细信息

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>
    )
}

import React，{useffect}来自“React”
从'react router dom'导入{useParams}；
导出常量UserDetail=（）=>{
const{userid}=useParams（）
useffect（（）=>{
fetch（`/user detail/${userid}`）。然后（res=>res.json（））。然后（result=>{
console.log（结果）
})
}, [])
返回(
)
}

Bu，当控制台日志显示此错误“Uncaught（in promise）SyntaxError:Unexpected token<在JSON中的位置0”时

我犯了什么错误

获取url

fetch (`https://randomuser.me/api/?seed=${seed}`). then (d=>d.json()).then(e=>console.log(e))

这里的种子是一根弦

const seed ="fea8be3e64777240"

---

您需要对结果使用状态

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>
    )
}

import React，{useState，useffect}来自“React”
从'react router dom'导入{useParams}；
导出常量UserDetail=（）=>{
const{userid}=useParams（）
const[result，setResult]=useState（[]）；
useffect（（）=>{
fetch（`/user detail/${userid}`）。然后（res=>res.json（））。然后（result=>{
console.log（结果）
setResult（result）；
})
}, [])
返回(
)
}

如果您对生成包含详细信息的随机用户感兴趣，可以使用另一个免费API

API:

终点：

Wirespec允许您创建多达100万个随机用户，包括头像。请访问：

---

能否显示从API调用返回的数据？需要哪些数据？数据获取

userid

返回`fetch（

https://randomuser.me/api

）`，您的端点应该是这样的`fetch（

https://randomuser.me/api

）`，您的端点应该是这样的，当我尝试将id值设置为seed时，我会得到不同的结果。我在API中没有获得seed值