反應組件在onClick后不更新-有解無憂

在我的專案中，我有一些箭頭圖示（包含在Skill組件中），當您單擊它們時，它們會更改它們的 className。為了檢查組件是否被點擊，我使用了一個布爾陣列作為狀態，所以當 onClick 事件被觸發時，它會切換組件的狀態。狀態正確更改，但組件不會更新類，并且僅在第一次單擊后才會進行渲染（以及安裝期間）。

頁面代碼：

import { useState, useEffect } from 'react';

import Skill from '../../components/skill/skill.component';
import { skills } from './skills';

import './about-page.styles.scss';

const AboutPage = () => {
    console.log('render')
    const [cache, setCache] = useState([]);

    useEffect(() => {
        setCache(new Array(skills.length).fill(false))   
    }, []);

    const onToggleFunc = n => {
        cache[n] = !cache[n]; 
        setCache(cache);
        console.log(cache);
    }

    return ( 
        <div className='about-page'>                
            <div className='container'> 
                {
                    skills.map((x, i) => (
                        <Skill 
                            isToggled={cache[i]} 
                            skillName={x.name} 
                            onClickFunc={() => (onToggleFunc(i))}
                            key={i}                         
                        />
                    ))
                }
            </div>
        </div>
    )
}

export default AboutPage;

技能組件代碼：

import './skill.styles.scss';
import icon from '../../assets/icons/arrow.png';

const Skill = ({ isToggled, skillName, onClickFunc }) => (
    <div className='skill-item'>
        <img src={icon} alt='icon' 
            className={`icon ${isToggled ? 'toggled' : '' }`} 
            onClick={onClickFunc}
        />
        <span className='desc'>{skillName}</span>
    </div>
)

export default Skill;

這里是瀏覽器控制臺

uj5u.com熱心網友回復：

你永遠不能改變狀態變數，你必須創建一個新的參考并通過呼叫 updater 方法更新狀態變數。

const AboutPage = () => {
    const [cache, setCache] = useState(() => new Array(skills.length).fill(false));

    function onToggleFunc(n) {
      // create a new array from the previous one
      setCache(prevCache => prevCache.map((val, i) => i !== n ? val : !val));
    }

    return ( 
      <div className='about-page'>                
        <div className='container'> 
          {
            skills.map((x, i) => (
              <Skill 
                key={i}
                isToggled={cache[i]} 
                skillName={x.name} 
                onClickFunc={() => onToggleFunc(i)}                         
              />
            ))
          }
        </div>
      </div>
    )
}

export default AboutPage;

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/394856.html

標籤：javascript css 数组反应反应钩子

上一篇：JavaScript–模塊化方法的for回圈

下一篇：邀請記錄DiscordJSv13TypeError：無法讀取未定義的屬性“邀請者”