为什么 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 => {

    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>;

};

Answer 2

原因是因为是一个固定的数字（例如 ），并且在整个循环中，at 的值是相同的。然而，设置为 9 计数循环的电流，因此对于每个 .itemId3letters[3]ididxItem

const 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'