Javascript 更新时反应状态材质ui映射冲突

我对两种不同组件的反应状态变化有问题

父类具有更改状态的命令和函数的状态

constructor(props) {
        super(props);
        this.state = {
            expanded: false,
            addLock: false,
            pendingCommand: undefined,
            commands: [],
            defCommands: [],
        };

render() {
        return (
            <div>
                <this.Commands/>
            </div>
        );
    }

构造函数（道具）{
超级（道具）；
此.state={
扩展：错，
艾德洛克：错，
pendingCommand:未定义，
命令：[]，
def命令：[]，
};
render（）{
返回(
);
}

这两个不同的组件是选项卡中的材质ui自定义手风琴

Commands = () => {

   const tabs = [
   <CommandAccordion
       cmd={this.state.defcommands}
       expan={this.state.expanded} addLock={this.state.addLock}
       hdlICh={this.handleInputChange}/>,
   <CommandAccordion
       cmd={this.state.commands} pendCmd={this.state.pendingCommand}
       expan={this.state.expanded} addLock={this.state.addLock}
       hdlICh={this.handleInputChange}/>]
}

命令=（）=>{
常量选项卡=[
,
]
}

手风琴通过如下命令进行映射：

const commands = props.cmd;
const pendingCommand = props.pendCmd;

{[...pendingCommand === undefined ? [] : [pendingCommand], ...commands].map((obj, index) => (
<CstmAccordion expanded={expanded === obj._id} onChange={handleChange(obj._id, index)}
                           onClick={() => customOnChange(obj)}
                           key={'accordion-defcommands-' + index}>
    <CstmAccordionDetails>
           <Tabs value={tabId}>
                <StyledTab label="Settings"/>
                <StyledTab label="Advanced settings"/>
           </Tabs>
<TabPanel value={tabId} Id={0} index={index} obj={obj} funcs={funcs}
     commandV={commandValue}/>
<TabPanel value={tabId} Id={1} index={index} obj={obj} funcs={funcs}
     commandV={commandValue}/>

const commands=props.cmd；
const pendingcmd=props.pendCmd；
{[…pendingCommand==未定义？[]：[pendingCommand]，…命令].map（（对象，索引）=>(
客户变更（obj）}
key={'accordion-defcommands-'+index}>

现在，选项卡窗格有自己的状态，该状态在开始时设置，并在文本字段中用作值

const [commandValue, setCommandValue] = React.useState(obj.command);

<TextField
      value={commandValue}
      onBlur={funcs.handleInputChange(index, 'command')}
      onSelect={() => {
          funcs.handleOnFieldSelect(index)
      }}
      helperText={`What triggers the response? ${!commandValue ? 0 : commandNameValue.length}/40`}
      onChange={(event) => {
         if (event.target.value.length <= 40)
            setCommandValue(event.target.value);
         }}/>

const[commandValue，setCommandValue]=React.useState（obj.command）；
{
funcs.handleOnFieldSelect（索引）
}}
helperText={`什么触发响应？${！commandValue？0:commandNameValue.length}/40`}
onChange={（事件）=>{
if（event.target.value.length

现在的问题是，如果我首先加载所有内容，它会打开父组件中默认命令的选项卡，并且看起来一切正常。但是如果我将选项卡更改为自定义命令，自定义命令选项卡中的第一个命令与默认命令选项卡中的第一个命令具有相同的值。（对于制表符，我指的是

命令=（）=>{

中的

常量制表符=[…

，而不是

）

如果我更改了自定义命令中的值，请保存它并更改回默认选项卡，现在默认命令具有自定义命令的值

同样重要的是，现在该值只与具有相同索引的其他命令同步。这意味着第二个选项卡中的第二个命令有自己的值，并且与之前的命令不同，但仍与第一个选项卡中的第二个命令同步

我想这可能与共元素的呈现顺序有关，但我不知道

我尝试过在手风琴中使用

commands.map

函数而不是在选项卡面板中管理状态，每次单击手风琴时都会更改状态，并为选项卡面板提供

commandValue

和

SetCommandValue

，这在同步问题方面起作用，但在文本中的输入会起作用字段，最坏情况下每个字符有2秒的输入延迟

我希望你能理解我的问题，即使它有点多