反应组件不刷新

Question

我正在制作一个 React 应用程序，我必须更新列表两次（至少或更多次）。显然，我必须使用 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 } />) }
    ...
)

这是我加载第一个颜色数组的时间：

这是我加载第二个颜色数组的时间：

这是我在加载第二个数组时所期望的（只有在重新加载页面时我才会获得）：

如您所见，它吃掉了前两个颜色行:(

Answer 1

您没有在 map 函数中设置 key 属性，这可能会导致问题。在

中设置唯一键属性

<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

反应组件不刷新

react components does not refresh

javascript

reactjs

react-hooks

use-effect

use-state