无法将属性添加到函数内的对象答案

【问题标题】：Cannot add a property to an object within a function无法将属性添加到函数内的对象
【发布时间】：2021-08-05 09:34:40
【问题描述】：

我正在尝试向对象插入属性，这是代码

import React from 'react';
import { Link } from 'react-router-dom';

const Question = () => {

  let active;

  const handleClick = (iconName) => {
    active = {};
    active[iconName] = true;
  };
  console.log(active.isHome);  // undefined

  return (
    <Link to='/'>
      <div
        className={`center ${active.isHome && 'active'}`}
        onClick={() => handleClick('isHome')}
      >
        <Home className='navItem' />
      </div>
    </Link>
  );
};

export default Question;

active.isHome 以上返回undefined。这对我来说似乎是一个意外的行为。我该怎么做才能将isHome: true 插入active 对象，为什么没有为active 赋值？

【问题讨论】：

active 甚至没有分配任何值。你应该得到的是一个 TypeError。
为什么不用状态？
React 使用状态；状态更改会导致重新渲染。这反过来又会导致功能组件的功能再次运行。但是 active 不是状态的一部分，并且 Question 是一个函数，而不是一个类。所以这里有两个问题：每次组件重新渲染时，active 的值都会丢失，但这永远不会发生，因为它没有改变的状态。
你能分享一个stackblitz链接吗？使用状态可以提供帮助
一切都会在这里得到解答：reactjs.org/docs/hooks-state.html

标签： javascript reactjs function object

【解决方案1】：

我从问题中理解的解决方案。如果“ showHome.active?.isHome ”为真，则活动类使背景变为绿色，并且我使用可选链接来忽略活动内部的不存在属性，当页面最初加载时

import React, { useState } from 'react';

const initialState = {
    active: {},
};

function App() {
    const [showHome, setShowHome] = useState(initialState);

    const bgChange = (iconName) => {
        let active = {};
        active[iconName] = true;
        setShowHome({ active });
    };

    console.log(showHome, '<>?', showHome.active?.isHome && 'active');
    return (
        <div className="body">
            <button onClick={() => bgChange('isHome')}>make active </button>
            <div className={`center ${showHome.active?.isHome && 'active'}`}>
                <h1>hi visible in Green</h1>
            </div>
        </div>
    );
}

【讨论】：