useState Hook 在事件侦听器中不起作用

Question

setter function using useState is not working inside an event listener function.

• visit sandbox: https://codesandbox.io/s/mystifying-austin-e9zgh
• click on search box, a suggestion dropdown will appear
• press down key, it will highlight the next item
• pressing down key again doesn't works [issue], expected behavior: down key should point to next item

Problem Statement: Develop a search suggestion with "Down/Up" key accessibility.

Implementation:

• create a search bar component.

              <input
                  style={{ outline: "none" }}
                  placeholder="Search Here"
                  className="w-full text-gray-800"
                  onClick={() => {
                    setShowSuggestion(true);
                    document.addEventListener("keydown", escFunction, false);
                  }}
                  onChange={(event) => setTitle(event.target.value)}
                  value={value}
                />

• create a suggestion component.

              <div
                className={
                  !showSuggestion
                    ? "hidden"
                    : "flex flex-row border border-gray-300 border-t-0  mx-auto w-3/4 space-x-4"
                }
              >
                <ul className="w-full">
                  {people.map((person) => (
                    <li
                      key={person.id}
                      className={cursor === person.id ? "bg-red-500" : ""}
                    >
                      {person.name}
                    </li>
                  ))}
                </ul>
              </div>

• on clicking searchbar add event lister to check key press
• on keyevent == "down arrow key", set selected recommendation = next item in list.

  function escFunction(event) {
    if (event.keyCode === 27) {
      document.removeEventListener("keydown", escFunction);
      setShowSuggestion(false);
    }

    if (event.keyCode === 40) {
      const nextId = cursor + 1;
      setCursor(nextId);   //---------------> this line not setting the value
      setTitle(people[nextId].name);
    }
  }

**Issue: ** The keypress event is triggered, but the setter function doesn't work after first click.

Answer 1

Instead of adding event listener to document you should add it to input keydown event. Also check for the availability of key for people object before accessing its name - people[nextId].name . That should solve your problem:

<input
                  style={{ outline: "none" }}
                  placeholder="Search Here"
                  className="w-full text-gray-800"
                  onClick={() => {
                    setShowSuggestion(true);
                  }}
                  onKeyDown={escFunction}
                  onChange={(event) => setTitle(event.target.value)}
                  value={value}
                />

Answer 2

The value(updated value) of cursor is not available during the execution of escFunction. In order to access the value it has to be converted to setCursor(currentId => currentId + 1); or

setCursor(currentId =>{

// do pre processing
return cursor+1
})

As hinted in comments:

• Passing a callback allows you to access the current state value. Your code as it is creates a closure around the state value at the time the child was last rendered.

• cursor from the state inside that closure function is always the initial value, because of the closure function