Блог

Я извлекаю данные из API и отображаю имя пользователя в списке пользователей родительского компонента, и когда я нажимаю на одно имя, он отображает дочерний компонент, называемый 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 amp;amp; (
              <>
                {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
 

После того, как вы установили showUser значение false, вы больше никогда не устанавливаете его true обратно. Я бы посоветовал вам onClick , когда вы сопоставляете пользователей, как выбрать пользователя, так и показать его —

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

Вероятно, имело бы смысл объявить эту функцию вне вашего возврата, так как она будет многострочной.