显示用户个人资料而不是列表

Question

在以下应用中，我正在访问随机用户API并显示12个用户的列表。

App.js

import React, { useState } from 'react'
import UserList from './components/UserList'

const App = props => {
  const [id, setID] = useState(null)
  console.log(`Passed variable to App.js is: ` + id)

  return (
    <>
      <UserList setID={setID} />
    </>
  )
}

export default App

UserList.js

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const UserList = ({ setID }) => {
  const [resources, setResources] = useState([])

  const fetchResource = async () => {
    const response = await axios.get(
      'https://api.randomuser.me/?results=12'
    )
    setResources(response.data.results)
  }

  useEffect(() => {
    fetchResource()
  }, [])

  return (
    <ul>
      {resources.map(item => (
        <li key={item.name.first}>
          <div>
            <h2>{item.name.first} {item.name.last}</h2>
            <button
              onClick={() => setID(item.login.uuid)}
            >
              Details
            </button>
          </div>
        </li>
      ))}
    </ul>
  )
}

export default UserList

上面的代码正在工作。但是现在我想要，如果我单击列出的所有用户的按钮，则只会显示该用户。

我该怎么做？

响应JSON如下所示：

Answer 1

最简单的方法是在ressources变量上应用过滤器，以仅显示具有选定uuid的用户。

为此，您首先需要与UserList component共享所选ID：

App.js

<UserList id={id} setID={setID} />

然后相应地更新UserList：

UserList.js

const UserList = ({ id, setID }) => {

    return (
        <ul>
          { resources
               .filter(user => Boolean(id) ? user.login.uuid == id : true )
               .map(item => (
               <li key={item.name.first}>
                 <div>
                   <h2>{item.name.first} {item.name.last}</h2>
                   { Boolean(id) ? 
                     <button onClick={() => setID(null)}>
                       Hide
                     </button>
                     :
                     <button onClick={() => setID(item.login.uuid)}>
                       Details
                     </button> 
                    }
                 </div>
               </li>
              )
          }  
        </ul>
    )
}

这样，您将仅在您的<ul>中显示选择的用户。要取消选择用户，只需致电setID(null)

显示用户个人资料而不是列表

如果该解决方案可以过滤您的列表，我想您可能希望调整页面以显示用户的所有详细信息。下一步将是使用react-router-dom和用户uuid的url容器来实现多页。

您可以查看url-params example，它可能正是您想要的。

Answer 2

这是一个略微详细的选项，它扩展到单个组件之外，但由于模块化而更易于扩展。

在一个新文件中创建一个新的react组件，例如UserDetails.js

现在，您需要一种单击按钮时导航到此新页面的方法。因此，在您的App.js中，您需要一个类似

的路由器

import { BrowserRouter, Switch} from 'react-router-dom'

然后在您的App.js文件中将所有组件包装在路由器中：

class App extends Component {
    render() {
        return (
      <BrowserRouter>
          <div className="App">
             <Switch>
            <Route exact path="/user-list" component={UserList} />
            <Route exact path="/detail" component={UserDetails}/>
            </Switch>
          </div>
    </BrowserRouter>
   );
  }
}
export default App;

现在，单击按钮后，您就可以导航到用户详细信息页面。因此，添加像goToDetails这样的函数：

 <button onClick={() => goToDetails(item)}>

下一步，定义导航至下一页的功能

goToDetails(item) {
  this.props.history.push('/detail', {selectedUser:item:});
}

上面提供了历史记录道具，因为我们之前将整个应用程序包装在BrowserRouter中。

在详细信息页面中，您将获得selectedUser详细信息作为道具：

const selectedUser = this.props.location.state.selectedUser;

现在您可以根据需要渲染它。

反应-仅显示点击的用户

2 个答案:

显示用户个人资料而不是列表