【问题标题】:React State seems to be overwritten / setState seems not to workReact State 似乎被覆盖/setState 似乎不起作用
【发布时间】: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


【解决方案1】:

setMemoryStatus 是一个函数,因此在调用它时应该使用括号() 而不是括号[]。调用它的行应该是:

setMemoryStatus(newMemoryStatus);

【讨论】:

  • o wauw,我已经看了 6 个小时了……典型的。谢谢大家!!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-06-15
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多