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

【问题标题】：How to get user details of user from randomuser API?如何从 randomuser API 获取用户的用户详细信息？
【发布时间】：2021-04-03 06:17:03
【问题描述】：

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

但是，当控制台日志显示此错误时“未捕获（承诺中）SyntaxError: Unexpected token

我做错了什么？

【问题讨论】：

你能显示从 API 调用返回的数据吗？
你想要哪些数据？
数据获取userid返回
` fetch(https://randomuser.me/api) `，你的端点应该是这样的
` fetch(https://randomuser.me/api) `，你的端点应该是这样的

标签： javascript reactjs api

【解决方案1】：

获取网址

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

其中seed是一个字符串

const seed ="fea8be3e64777240"

【讨论】：

当我尝试将 id 值作为种子时，我得到了不同的结果
我没有在 API 中获得种子价值

【解决方案2】：

你需要为结果使用状态

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

【讨论】：

【解决方案3】：

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

API：https://wirespec.dev/Wirespec/projects/apis/Stackoverflow/apis/getUserDetails

端点：https://api.wirespec.dev/wirespec/stackoverflow/getuserdetails?id=100

Wirespec 可让您创建多达 100 万个随机用户，包括头像。在以下位置查看：

https://wirespec.dev

【讨论】：