如何修复警告：在呈现其他组件 （“Context.Consumer”） 时无法更新组件 （'Value'）。找到错误的 setState（）

问：

我在运行 react js vite 项目时遇到了一个问题，代码看起来正确但没有运行代码并显示 **警告：在渲染其他组件 （） 时无法更新组件 （）。要在其中找到错误的 setState（） 调用，请按照 https://reactjs.org/link/setstate-in-render 中所述的堆栈跟踪进行操作ValueContext.ConsumerContext.Consumer **

页面代码：

import React, { useEffect, useState } from 'react';
import {
Accordion,
AccordionItem,
AccordionItemHeading,
AccordionItemButton,
AccordionItemPanel,
AccordionItemState

} from 'react-accessible-accordion';

import {MdOutlineArrowDropDown} from 'react-icons/md';
import data from '../../utils/accordion';
import './value.css';

const Value = () => {
return (
<section className="v-wrapper"\>
<div className="padding innerWidth flexCenter v-container"\>
{/\* Left Side \*/}
<div className="v-left">
<div className="image-container">
<img src="./value.png" />
</div>
</div>
<div className="flexColStart v-right">
<span className="orangeText">Our Value</span>
<span className="secondaryText">Why Value </span>
<span className="secondaryText">Value description\</span>

                <Accordion
                className="accordion"
                allowMultipleExpanded={false}
                preExpanded={[0]}
                >
                 {data.map((item, i ) => {
                    
                    const [className, setClassName] = useState(null);
    
                        return (
                            <AccordionItem className={`accordionItem ${className}`} key={i} uuid={i}>
                                <AccordionItemHeading>
                                    <AccordionItemButton className="flexCenter accordionButton">
                                        <AccordionItemState>
                                            {({ expanded }) =>
                                            expanded 
                                            ? setClassName("expanded") 
                                            : setClassName("collapsed")
                                            }
    
                                        </AccordionItemState>
                                        <div className="flexCenter icon">{item.icon}</div>
                                        <span className="secondaryText">{item.heading}</span>
                                        <div className="flexCenter icon">
                                            <MdOutlineArrowDropDown size={20}/>
                                        </div>
                                    </AccordionItemButton>
                                </AccordionItemHeading>
                                <AccordionItemPanel>
                                    <p className="secondaryText">{item.detail}</p>
                                </AccordionItemPanel>
                            </AccordionItem>
                        );
                    })}
                
                </Accordion>
            </div>
        </div>
    </section>

)
}

export default Value;

尝试删除 setState 行但显示相同行