首頁猿問為什么 ID 和項目 Id...

為什么 ID 和項目 Id 在此代碼中的工作方式不同？

JavaScript

胡說叔叔 2022-09-29 17:42:29

法典：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]

查看完整描述

3 回答

慕慕森

TA貢獻1856條經驗獲得超17個贊

問題是：

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

};

反對回復 2022-09-29

慕勒3428872

TA貢獻1848條經驗獲得超6個贊

原因是因為是一個固定的數字（例如），并且在整個循環中，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])

反對回復 2022-09-29

慕婉清6462132

TA貢獻1804條經驗獲得超2個贊

可能是由于此任務，您遇到了這種意外行為。您可能需要使用相等或嚴格相等運算符letters[letters.length - 1] = 'H'letters[letters.length - 1] === 'H'

反對回復 2022-09-29

3 回答
0 關注
114 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

為什么 ID 和項目 Id 在此代碼中的工作方式不同？

為什么 ID 和項目 Id 在此代碼中的工作方式不同？

3 回答

添加回答

為什么 ID 和項目 Id 在此代碼中的工作方式不同？

為什么 ID 和項目 Id 在此代碼中的工作方式不同？