React 数组挂钩不起作用，新值不显示答案

【问题标题】：React array hooks don't work, new values don't displayReact 数组挂钩不起作用，新值不显示
【发布时间】：2023-01-10 19:20:56
【问题描述】：

我是反应的新手，我正在练习它。

import React, { useState } from 'react';
import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';

import { sections } from '../../data/sections';

export const NavigationTop = () => {
    const [mySections, setMySections] = useState(sections);

    const selectSection = (id) => {
        let newSections = mySections;
        newSections[id].name = mySections[id].name + '*'; 
        setMySections(newSections);
    };
    
    return (
        <Tabs defaultActiveKey="0" id="fill-tab-example" className="mb-3" onSelect={(k) => selectSection(k)} fill> 
            {mySections.map((el) => {
                const { id, name } = el;
                return (
                    <Tab id={id} key={id} eventKey={id} title={name}></Tab>
                );
            })}
        </Tabs>
    );
}

“selectSection”事件被触发，“newSections”包含新值。但是该页面不显示新值。我的错误在哪里？

谢谢您的帮助

【问题讨论】：

什么是mySections？它是一个数组吗？

标签： javascript reactjs react-hooks

【解决方案1】：

试试这个改变

let newSections = [...mySections];

它所做的是复制你的数组。

如果您不复制，则引用不会更改，并且 React 会进行浅比较（仅检查引用而不检查值）以查看是否需要更新 UI。

【讨论】：