单击时在 React 中显示一个特定项目的值

Question

我的应用程序有一个用户列表。

每个用户都有一定数量的博客，其标题、作者和 url。

我当前的应用程序显示了所有用户的列表，如下所示：

用户 1：博客：2 SHOW
用户 2：博客：8 SHOW
等等

单击显示按钮时，页面应呈现特定用户博客的详细信息，如下所示：

用户 1 的博客：

标题1
标题2
等等

在实施我当前的解决方案时，单击显示按钮时 - 用户仅被定向到用户 1 的详细信息，即使单击用户 2、用户 3 或用户 4 ......它总是返回到用户 1

你是怎么做到的，当你点击用户 1 的 SHOW 时，它会转到用户 1，用户 2 的 SHOW 会转到用户 2 等等。我认为问题出在 HANDLECLICK 上。

 import userService from '../services/users' import { useState, useEffect } from 'react' const User = () => { const [users, setUsers] = useState([]) const handleClick = () => { users.map(u => setUsers([u])) } useEffect(() => { userService.getAll().then(users => { setUsers(users) }) }, []) console.log(users) const blogStyle = { paddingTop: 10, paddingLeft: 2, border: "solid", borderWidth: 1, marginBottom: 5, }; if (.users) { return null } if (users.length === 1) { return ( <div> <h2>{users.map(u => u.username)}'s entries</h2> {users.map(u => u.blogs.map(u => <li key={u.id} style={blogStyle}>{u.title}</li>))} </div> ) } return ( <div> <h2>Users</h2> <ul> {users.map(u => <li key={u.id} style={blogStyle}>{u:username}. {u.blogs length}<button onClick={handleClick}>Show</button></li>)} </ul> </div> ) } export default User

服务：

 import axios from "axios"; const baseUrl = "/api/users"; const getAll = () => { const request = axios.get(baseUrl); return request.then((response) => response.data); }; export default { getAll }

用户

[{"title":"Blog Title","author":"J John","url":"www.url.com","id":"628f998a532016f769978e95","likes":0},{"title":"Blog Title","author":"J John","url":"www.url.com","user":{"username":"root","name":"Superuser","id":"628f969252b604bdb13b672e"},"id":"628f9b685bfa95ded0cb29cf","likes":0},{"title":"Blog Title","author":"J John","url":"www.url.com","user":{"username":"root","name":"Superuser","id":"628f969252b604bdb13b672e"},"id":"6298ba4da20133b892443f75","likes":0},{"title":"Passwords and tokens","author":"I Fleming","url":"www.iiii.com","user":{"username":"testuser","name":"testuser","id":"6298bef3c00dbef70a9f3c55"},"id":"6298cc365935ee8f873dd2cf","likes":0},{"title":"jjj","author":"jjj","url":"jjj","user":{"username":"jjj","name":"jjj","id":"629b18d3272af122ea7830f2"},"id":"629b194c5ad19d29b2d30910","likes":0},{"title":"You","author":"Program","url":"www.kkk.com","user":{"username":"kkk","name":"kkk","id":"629b19b15ad19d29b2d30915"},"id":"629b1a1e5ad19d29b2d3091d","likes":0},{"title":"Zoom","author":"Parzifal","url":"www.smorg.com","user":{"username":"kkk","name":"kkk","id":"629b19b15ad19d29b2d30915"},"likes":1,"id":"629b1b5fd8d110a6e5d4671e"},{"title":"Rank ","author":"J John","url":"www.rank.com","user":{"username":"mmm","name":"mmm","id":"629b5b62d2afb19a39515c77"},"id":"629f53295cfed3eca2683add","likes":0},{"title":"Test Title With Update","author":"J John","url":"www.title.com","user":{"username":"mmm","name":"mmm","id":"629b5b62d2afb19a39515c77"},"likes":3,"id":"62cc19b6df95af90c24418df"},{"title":"fdddd","author":"Daniel Harmann","url":"Daniel Harmann","user":{"username":"mmm","name":"mmm","id":"629b5b62d2afb19a39515c77"},"id":"62d1760131423c5391b17a91","likes":0}]

Answer 1

答案是把 HandleClick 改成 handleClick = (u) => setUsers([u])

并更改 onClick。

请参阅以下内容：

    import userService from '../services/users'
import { useState, useEffect } from 'react'


const User = () => {

const [users, setUsers] = useState([])
     
const handleClick = (u) => {
    setUsers([u])
    }

useEffect(() => {
    userService
      .getAll()
      .then(users => {
        setUsers(users)
      })
  }, [])

  console.log(users)

  const blogStyle = {
    paddingTop: 10,
    paddingLeft: 2,
    border: "solid",
    borderWidth: 1,
    marginBottom: 5,
  };

  if (!users) {
    return null
  }

  if (users.length === 1) {
    return (
        <div>
            <h2>{users.map(u => u.username)}'s entries</h2>
            {users.map(u => u.blogs.map(u => <li key={u.id} style={blogStyle}>{u.title}</li>))}
        </div>
    )
  }



    return (
        <div>
            <h2>Users</h2>
            <ul>
                {users.map(u => <li key={u.id} style={blogStyle}>{u.username}: {u.blogs.length}<button onClick={() => handleClick(u)}>Show</button></li>)}
            </ul>
        </div>
    )
}

export default User