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

Posted 2023-02-23

【中文标题】按钮 onClick 在反应组件中仅工作一次

【英文标题】：button onClick works only once in react component

【发布时间】：2021-12-14 21:19:56

【问题描述】：

我正在从 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

【参考方案1】：

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

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

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

【讨论】：

谢谢拉兹！我可能误解了你……但我在返回之外尝试了这个，就在 onHandleClick 下： const onClick = () => setSelectedUser(user); setShowUser(true); 然后这个在按钮里面，但我得到一个错误：'user' is not defined。 user.name