为什么 ID 和项目 Id 在此代码中的工作方式不同？

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>

    )

}

为什么在组件中使用，只需单击一个项目即可使所有 “的 接收 ”H“ 字母，而使 li 的接收值在每次单击时逐个显示letters[itemId]Itemliletters[id]

Answer 1

问题是：因为 itemId 是相同的所有 ， 单个值正在与所有<Item><Item>哪个是索引，并且是所有idx<Item>const [letters, setLetters] = useState([]);const [itemId, setItemId] = useState(null);const handleItemClick = id => {&nbsp; &nbsp; letters[letters.length - 1] === "H"&nbsp; &nbsp; &nbsp; ? setLetters([...letters, "L"])&nbsp; &nbsp; &nbsp; : setLetters([...letters, "H"]);&nbsp; &nbsp; setItemId(id); // <---- itemId is being set from here};{[...Array(9)].map((_, idx) => { // <----- idx coming from here, and is index&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <Item&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; letters={letters}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; handleItemClick={handleItemClick}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id={idx} // <--- this is index, comes diff for all item&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; itemId={itemId} // <--- you are passing same value for all item&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; );})}您可以将 Item 组件替换为下面的一个组件，并选中两个值const Item = ({ letters, id, itemId, handleItemClick }) => {&nbsp; return <li onClick={() => handleItemClick(id)}>idx : {idx} and item Id : {itemId} ---> {letters[itemId]}</li>;};

Answer 2

原因是因为是一个固定的数字（例如 ），并且在整个循环中，at 的值是相同的。然而，设置为 9 计数循环的电流，因此对于每个 .itemId3letters[3]ididxItemconst data = [1, 2, 3, 4, 5, 6, 7, 8, 9];const currentItemId = 0;// Logs `1` 9 times[...Array(9)].forEach((_, idx) => console.log(data[currentItemId])// Logs `1` through `9`[...Array(9)].forEach((_, idx) => console.log(data[idx])

Answer 3

可能是由于此任务，您遇到了这种意外行为。您可能需要使用相等或严格相等运算符letters[letters.length - 1] = 'H'letters[letters.length - 1] === 'H'