为什么在 React 中更改第二个状态变量会导致第一个状态变量的更改生效？

Question

我无法在较短的示例中轻松重现这一点，但我的问题是：

1. section 是一个 JavaScript 对象，它是 父模块

   中 JavaScript 对象状态变量数组的一部分

2. 单击调用 section.showContent 的按钮时，我可以成功更改 toggleContent() 的值，但此更改不会对页面产生任何影响。

3. 仅当我创建另一个状态变量并更改该状态变量的值时，section.showContent 中的更改才会对我页面上的状态产生影响。 >

这恰好解决了我当前的问题，但我不知道为什么会这样。

谁能解释一下？

interface ICurriculumSectionProps {
    section: any;
    searchText: string;
    sectionIndex: number;
}

function CurriculumSection(props: ICurriculumSectionProps) {
    const [message, setMessage] = useState('start');
    const { section, searchText, sectionIndex } = props;
    const toggleContent = () => {
        section.showContent = !section.showContent;
        setMessage(`${message}n`); // necessary to make changes in section variable affect React page
    };
    return (

        <li id={section.isToday ? 'today' : ''} key={sectionIndex} className="section">
            {(section.formattedDay && (searchText.trim() === '' || (section.bulkSearchText.toUpperCase().includes(searchText.toUpperCase())))) && (
                <div className={section.isToday ? 'dayLabel isToday' : 'dayLabel isNotToday'}>
                    {section.formattedDay}
                </div>
            )}