按钮 onClick 在反应组件中仅工作一次

Question

我正在从 API 获取数据并在父组件 UserList 中显示用户名，当我单击一个名称时，它会显示名为 UserDetails 的子组件。组件）。

UserDetail 组合包含一个按钮，单击该按钮会隐藏该组件，因此用户可以点击另一个用户的名称并查看他们的详细信息。我第一次选择用户并关闭窗口时它工作正常。但是当我再次点击第二个用户时，什么也没有发生。我需要刷新页面，让它再次正常工作。

我不明白问题出在哪里。我怀疑与 UserDetails 组件周围的三元运算符有关？还是与国家有关？我可以写 false 而不是 null 吗？

父组件：

const UserList = () => {
     
      const [users, setUsers] = useState([])
      const [selectedUser, setSelectedUser] = useState()
      const [showUser, setShowUser] = useState(true)
      
      const onHandleClick = () => setShowUser(false)
      
      useEffect(() => {
        fetch(URL)
          .then(res => res.json())
          .then(json => setUsers(json));
      }, [])
    
      return (
        <>
          <header>      
            <h1>Users list</h1>
          </header>
          <section> 
            <ul>
              {users.map(user => (
                <li key={user.id}>
                  <button onClick ={() => setSelectedUser(user)}>{user.name}</button></li>
              ))}         
            </ul>
    
            {selectedUser && (
              <>
                {showUser ?
                <UserDetail 
                  name={selectedUser.name} 
                  username={selectedUser.username}
                  email={selectedUser.email}
                  address={selectedUser.address.street}
                  phone={selectedUser.phone}
                  company={selectedUser.company.name}
                  onClick={onHandleClick}
                />
                : false}           
              </>
            )}
              
          </section>
        </>
      )
    }
    
    export default UserList

子组件：

const UserDetail = ({name, username, email, address, phone, website, company, onClick}) => {
 
  return (
    <>
      <DetailWindow>
        <h1>{name}</h1>
        <p>{username}</p>
        <p>{email}</p>
        <p>Adress:{address}</p>
        <p>{phone}</p>      
        <p>{website}</p>      
        <p>{company}</p>       
        <button onClick={onClick}>X</button>
      </DetailWindow>
    </>
  )}
  
const DetailWindow = styled.div`
  border: black solid 1px;
`

export default UserDetail

Answer 1

将showUser 设置为false 后，您再也不会将其设置回true。当您映射用户以选择用户并显示用户时，我建议您使用 onClick -

onClick={() => {setSelectedUser(user); setShowUser(true);} }

在你的 return 之外声明这个函数可能是有意义的，因为它将是多行的。