按钮 onClick 在 React 组件中只工作一次

Question

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

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

我不明白问题出在哪里。我怀疑与 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。当您将用户映射到 select 用户并向用户显示 -

时，我会建议您使用 onClick

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

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

按钮 onClick 在 React 组件中只工作一次

button onClick works only once in react component

reactjs

conditional-operator

react-component