Блог

Я пытаюсь отобразить список искомых пользователей, возвращенных с сервера, и добавить при нажатии на любой из элементов списка, получить значение внутри компонента узла.

Сначала я извлекаю пользователей

 useEffect(() => {
        if (searchText.length === 0) {
            setSearchedUsers([])
            return
        }
        fetch(--users--)
        }).then((res) => res.json())
          .then((users) => {
                setSearchedUsers(users)
          })
    }, [searchText])

  

затем визуализируйте

 const searchedNodes = useRef([])

function renderWithRefs() {
        return (searchedUsers.map((user, i) => (
            <div className={`searched-user-div ${i}`} ref={(div) => searchedNodes.current[i] = div} key={i} onClick={(e) => showUserData(e)}>   
                <p className="searchedUser-Name">{user.Name}</p>
                <p className="searchedUser-age">{user.Age}</p>
            </div>
        )))
    }

function showUserData(e) {
        let ref = searchedNodes.current[parseInt(e.target.className.split(" ")[1])]
        let Name = ref.querySelector(".searchedUser-Name").textContent
        let age = ref.querySelector(".searchedUser-age").textContent.slice(1)
        ....
    }
  

при нажатии я получаю сообщение об ошибке: не удается прочитать свойство ‘querySelector’ неопределенного

Прямой запрос dom в React — очень плохой шаблон. Вы не должны этого делать, если у вас нет выбора (например, вам нужно запросить размер элемента).

В вашем случае вы могли бы сделать что-то проще, например:

 <div className={`searched-user-div ${i}`} key={i} onClick={(e) => showUserData(user)}> 
     <p className="searchedUser-Name">{user.Name}</p>
     <p className="searchedUser-age">{user.Age}</p>
</div>
  

Тогда вам не нужно запрашивать DOM.

Первый,

Использование индекса массива в качестве ключа не рекомендуется

Использовать индекс массива — плохая идея, поскольку он не идентифицирует ваши элементы однозначно. В случаях, когда массив сортируется или элемент добавляется в начало массива, индекс будет изменен, даже если элемент, представляющий этот индекс, может быть тем же самым. Это приводит к ненужному отображению.

 function renderWithRefs() {
        return (searchedUsers.map((user, i) => (
            <div className={`searched-user-div`} ref={(div) => searchedNodes.current[i] = div} key={JSON.Stringlify(user)} onClick={() => showUserData(user)} onKeyPress={() => showUserData(user)} tabIndex={0} role="button">   
                <p className="searchedUser-Name">{user.Name}</p>
                <p className="searchedUser-age">{user.Age}</p>
            </div>
        )))
    }

function showUserData(user) {
        //here you can show all user data
       <>
         <p className="searchedUser-Name">{user.Name}</p>
         <p className="searchedUser-age">{user.Age}</p>
         <p className="searchedUser-LastName">{user.LastName}</p>
         <p className="searchedUser-tel">{user.tel}</p>
         ....
       </>
        ....
    }
  

Вы можете видеть, что я добавил несколько реквизитов в ваш div из-за отсутствия статических взаимодействий элементов

Статические элементы HTML не имеют семантического значения. Это ясно в случае и . Это менее очевидно в случае элементов, которые кажутся семантическими, но не имеют семантического отображения на уровне доступности. Например , , ,

, , и — чтобы назвать несколько — не имеют отображения семантического уровня. Они так же лишены смысла, как .