我正在制作一個反應應用程式，我必須更新串列兩次（至少或更多）。顯然，我必須使用 useState 鉤子才能隨時編輯該串列。這很容易，但問題是我真的不知道，但在我的應用程式中，這兩個串列融合了自己。這是一個例子：我有一個水果清單["apples", "bananas", "avocados"]和一個社交網路["instagram", "snapchat", "facebook", "whatsapp", "telegram"]。現在，當我將狀態更改為第一個串列時，它完全變為：["apples", "bananas", "avocados", "whatsapp", "telegram"]。這真的很奇怪。它不是一個集合，而是一個類似的區別（？）。順便說一句，這是我寫的一些簡化代碼（基本）：
// Initialize in the App function
const [colors, setColors] = useState([])
const [colorpicker,setColorPicker] = useState(null)
const [inputskin, setInputSkin] = useState(localStorage.getItem('skin') !== null ? localStorage.getItem('skin') : testskin)
const inputFile = useRef(null) // rename as inputSkin
useEffect(() => {
const allcolors = []
async function getPixels(){
console.log('changed input skin')
const image = await pixels(inputskin)
for(let i = 0; i < image.height; i ){
pixelLoop:
for(let j = 0; j < image.width; j ){
const color = []
for(let k = 0; k < 4; k ) {
color.push(image.data[(i * image.width j) * 4 k])
}
const hex = rgbToHex(color)
for (let clr of allcolors) if (clr[0] === hex) { clr[1] ; continue pixelLoop }
if (!(allcolors.includes(hex)) && color[3] != 0) allcolors.push([hex,0])
}
}
allcolors.sort((a,b) => b[1] - a[1])
setColors(allcolors)
console.log(allcolors)
}
getPixels()
changePalette = setColorPicker
}, [inputskin])
我真的不知道出了什么問題，因為當我控制臺記錄顏色陣列時，沒關系，它向我顯示了我想要在渲染中擁有的陣列，但在渲染中它基本上不會重繪 自己。我嘗試通過 DOM 洗掉組件節點的子節點，但這并沒有真正幫助。這是我渲染組件的方式：
// render
return(
...
{ colors.map(([color], i) => <Color colorstart = { color } id = { i } key = { i } colorChange = { colorChange } />) }
...
)
這是我加載第一個顏色陣列的時候：
這是我加載第二個顏色陣列的時候：
這是我加載第二個陣列時所期望的（僅當我重新加載頁面時才獲得）：
如您所見，它吃掉了前兩個顏色行:(
uj5u.com熱心網友回復：
您沒有在map函式中設定可能導致問題的關鍵屬性。在中設定唯一鍵屬性
<Color colorstart = { color } id = { i } colorChange = { colorChange } />
例如
<Color key={color[0]} colorstart = { color } id = { i } colorChange = { colorChange } />
并檢查它是否有幫助。在這里閱讀更多：https ://reactjs.org/docs/lists-and-keys.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/477010.html
標籤：javascript 反应 反应钩子 使用效果 使用状态