【发布时间】:2021-10-18 14:15:07
【问题描述】:
我正在学习 React,但我认为我在更新状态/渲染组件方面缺少一些基本知识。
const allFalse = new Array(data.length)
const allTrue = new Array(data.length)
allFalse.fill(false)
allTrue.fill(true)
const [memoryStatus, setMemoryStatus] = useState(allFalse)
const [baseValue, setBaseValue] = useState(false)
此时记忆游戏有 5 张牌(这里只是学习),根据 memoryStatus 确定显示一侧或另一侧(真/假)。
当点击一张卡片时,我显然想更改该卡片在数组中的值。我正在使用此功能:
const handleChange = (position) => {
const newMemoryStatus = memoryStatus.map((item, index) =>
{
if(index === position) {
return !item
}
else return item
}
)
// i really dont understand why this does not change the state
setMemoryStatus[newMemoryStatus]
}
渲染部分是:
<div className={styles.container}>
{data.map((item, index) => {
return (
<div
key={index}
onClick={() => {handleChange(index)}}
className={styles.card}
>
{!memoryStatus[index] && <Image
src={item.img}
width="100px"
height="100px"
/>}
<span>
<center>
{memoryStatus[index] ? item.latinName : ''}
</center>
</span>
</div>
)})
}
</div>
以防万一,我的数据如下所示:
const data = [
{
name: 'Staande geranium',
latinName: 'Pelargonium zonate',
img: '/../public/1.png'
},
{
name: 'Groot Afrikaantje',
latinName: 'Tagetes Erecta',
img: '/../public/2.png'
},
{
name: 'Vuursalie',
latinName: 'Salvia splendens',
img: '/../public/3.png'
},
{
name: 'Kattenstaart',
latinName: 'Amaranthus caudatus',
img: '/../public/4.png'
},
{
name: 'Waterbegonia',
latinName: 'Begonia semperflorens',
img: '/../public/5.png'
}]
我做错了什么??
【问题讨论】:
-
你能给我们在
handleChage函数中setMemoryStatus[newMemoryStatus]之前的console.log(newMemoryStatus)的输出,看看数组是否正确更新了吗?
标签: javascript reactjs state