ReactJS：按鈕（跨度）視覺應在單擊時重新呈現和更改，但不會（使用 setState）

Question

我是一名年輕的開發人員，正在嘗試使用 reactjs 創建我的第一個網站，並在自定義導航欄上工作。 我希望我在導航欄中按下的按鈕在按下后改變顏色，而所有其他按鈕保持相同的顏色，但我的代碼似乎不起作用。 我正在使用 useState 來控制按鈕的 classNames（視覺效果）的值。 我的代碼：

import React, { useState } from 'react';
import { Container, Col, Row, Button } from 'react-bootstrap';
import { Link, useHistory } from 'react-router-dom';
import '../App.css';

const NavButtons = () => {

    const [navbuttons, setnavbuttons] = useState([
        {id: 0, urlAdd: "/", name: "FORSIDE", show: "navlit"},
        {id: 1, urlAdd: "/priser", name: "PRISER", show: "navlif"},
        {id: 2, urlAdd: "/tilmeldning", name: "TILDMELDING", show: "navlif"},
        {id: 3, urlAdd: "/kontakt", name: "KONTAKT", show: "navlif"},
        {id: 4, urlAdd: "/faq", name: "FAQ", show: "navlif"}
    ]);

    let handleChange = index => {
        let currentbuttons = navbuttons;
        for(let i=0; i<currentbuttons.length; i++){
            currentbuttons[i].show = i == index? "natlit":"natlif";
        }
        setnavbuttons(currentbuttons);
        console.log(currentbuttons[index].show)
    }

    let history = useHistory();

    return(
        <div>
            <div className="navul">
            {navbuttons.map(navbut => 
                <span 
                    className={navbut.show}
                    onClick={() => {
                        handleChange(navbut.id);
                        history.push(navbut.urlAdd);
                    }}
                    ><p/>{navbut.name}
                </span>)
                }
            </div>
        </div>
    );
}

export default NavButtons;

當我按下按鈕時，狀態會發生變化，但按鈕似乎不會重新呈現。 如果你能告訴我我做錯了什么，將不勝感激。

Answer 1

handleChange 需要修復，因此它不會更改現有狀態，而是在舊狀態的位置添加新對象。

let handleChange = index => {
    let currentbuttons = [...navbuttons];
    for(let i=0; i<currentbuttons.length; i++){
        currentbuttons[i] = {...currentbuttons[i], show: i === index? "natlit":"natlif"};
    }
    setnavbuttons(currentbuttons);
}