javascript - 为什么 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, handleItemClick, id, itemId }) => {
    return (
        <li
            onClick={() => handleItemClick(id)}
        >
          //the problem is here  
          //letters[id] returns different result from letters[itemId]
        </li>
    )
}

为什么letters[itemId]在Item组件中使用，让所有li的'一键接收'H'字母，而letters[id]让li的每一个点击接收值

代码沙盒

标签： javascriptreactjs

Answer 1

问题是：

因为 itemId 与您所有的相同<Item>，所以与所有共享单个值<Item>

这idx是索引并且是所有的差异<Item>

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); // <---- itemId is being set from here
};

{[...Array(9)].map((_, idx) => { // <----- idx coming from here, and is index
    return (
        <Item
            letters={letters}
            handleItemClick={handleItemClick}
            id={idx} // <--- this is index, comes diff for all item
            itemId={itemId} // <--- you are passing same value for all item
        />
    );
})}

您可以将 Item 组件替换为以下一个并检查两个值

const Item = ({ letters, id, itemId, handleItemClick }) => {
  return <li onClick={() => handleItemClick(id)}>idx : {idx} and item Id : {itemId} ---> {letters[itemId]}</li>;
};

请检查：