Состояние реакции, похоже, перезаписано / setState, похоже, не работает

#javascript #reactjs #state

Вопрос:

Я учусь реагировать, и я думаю, что мне не хватает чего-то фундаментального в обновлении компонентов состояния / рендеринга.

 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 карт (только что изученных здесь), и в зависимости от состояния памяти определяется, отображается ли та или иная сторона (правда / ложь).

При нажатии на карту я, очевидно, хочу изменить значение этой карты в массиве. Я делаю это с помощью этой функции:

     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] amp;amp; <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'
}]

Что я делаю не так??

Ответ №1:

setMemoryStatus является функцией, поэтому при ее вызове вы должны использовать круглые скобки () вместо скобок [] . Линия для вызова должна быть:

 setMemoryStatus(newMemoryStatus);