onClick 后 React 组件不更新答案

【问题标题】：React component doesn't update after onClickonClick 后 React 组件不更新
【发布时间】：2022-01-26 14:32:18
【问题描述】：

在我的项目中，我有一些箭头图标（包含在Skill 组件中），当您单击它们时，它会更改它们的类名。为了检查组件是否被点击，我使用了一个布尔数组作为状态，所以当 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;

Here浏览器控制台

【问题讨论】：

你正在改变状态，所以当你 setCache(cache) React 不知道它已经更新，因此不会重新渲染。您应该创建一个更改了适当值的新数组并将其传递给setCache。我不会输入如何去做，而是尝试在 SO 上找到一个类似的问题和答案，我敢肯定会有几个很好的问题，因为这是一个常见的错误/问题/问题！
[苦苦寻找一个好的，这让我很惊讶！无论如何，我看到其他人现在已经基于此给出了答案。]
这能回答你的问题吗？ Why is React not rendering my component state correctly?
@JaredSmith 我不确定这是一个有用的副本。在那个问题中，OP 根本没有使用状态——它们在这里，但它没有更新，因为它们直接改变它而不是将新对象传递给 setState。这不是同一个场景，我认为这里的场景更常见 - 所以令我惊讶的是，没有“规范”的重复。

标签： javascript css arrays reactjs react-hooks

【解决方案1】：

您必须从不改变状态变量，而必须创建一个新引用并通过调用 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;

【讨论】：

谢谢！现在它开始工作了