为什么id和itemId在此代码中的工作方式不同？

Question

代码：

const Game = () => {
  const [itemId, setItemId] = useState('');
  const [letters, setLetter] = useState([]);

   const handleItemClick = (id) => {
       letters[letters.length - 1] === 'H' ? setLetters([...letters, 'L']) :
          setLetters([...letters, 'H']);

       setItemId(id);
   }

   return (
      <div class="app">
         <ul>
             {
                [...Array(9)].map((_, idx) => {
                    return (
                       <Item
                          letters={letters}
                          handleSquareClick={handleItemClick}
                          id={idx}
                          itemId={itemId}
                        />
                     )
                })
             }
         </ul>
      </div>
    )
}

Item组件

const Item = ({letters, handleSquareClick, id, itemId }) => {
    return (
        <li
            onClick={() => handleSquareClick(id)}
        >
          //the problem is here  
          //letters[id] returns different result from letters[itemId]
        </li>
    )
}

为什么要在letters[itemId]组件中使用Item，使所有li都单击一次即可收到'H'字母，而letters[id]使li的每次单击都可以一个接一个地接收值

Codesandbox

Answer 1

[可能由于此分配letters[letters.length - 1] = 'H'，您将获得此意外行为。您可能需要使用等于或严格等于运算符letters[letters.length - 1] === 'H'

Answer 2

您必须将idx传递给handleClick。

Working demo

const App = () => {
  const [letters, setLetters] = useState([]);
  const [itemId, setItemId] = useState(null);

  const handleItemClick = id => {
    letters[letters.length - 1] === "H"
      ? setLetters([...letters, "L"])
      : setLetters([...letters, "H"]);

    setItemId(id);
  };

  return (
    <div>
      <ul>
        {[...Array(9)].map((_, idx) => {
          return (
            <Item
              key={idx}
              letters={letters}
              handleItemClick={() => handleItemClick(idx)}
              id={idx}
              itemId={itemId}
            />
          );
        })}
      </ul>
    </div>
  );
};

const Item = ({ letters, id, itemId, handleItemClick }) => {
  return (
    <li
      style={{ background: "gray", margin: "2px", cursor: "pointer" }}
      onClick={() => handleItemClick(id)}
    >
      {letters[itemId]}
    </li>
  );
};

export default App;