Javascript Input标记在react中失去了对状态更新的关注

这是一个非常简单的应用程序，我为2个案例声明了2个状态

在案例1中，我使用状态dataArray1并创建一个输入标记数组

在案例2中，我使用状态dataArray2并创建一个数组，其中只包含一个输入标记

现在的问题是，在案例1中，UI按要求运行，但在案例2中，当我们键入任何内容时，输入失去了焦点。我想了解为什么会发生这种情况，以及如何解决它

codesandbox的链接：

这是代码

从“react”导入{useState}；
导入“/styles.css”；
导出默认函数App（）{
常量[dataArray1，setDataArray1]=useState([
“你好”，
“我的名字是testBot”，
“我是一名学生”
]);
常量[dataArray2，setDataArray2]=useState([
“你好”，
“我的名字是testBot”，
“我是一名学生”
]);
const generateUI1=（数据）=>{
控制台日志（数据）；
返回数据.map（（e，i）=>{
返回(
{
让newData=[…data]；
newData[i]=e.target.value；
setDataArray1（新数据）；
}}
/>
);
});
};
常量输入组件=（道具）=>{
返回(
{
让newData=[…props.data]；
newData[props.i]=e.target.value；
setDataArray2（新数据）；
}}
//key={`new${props.i}`}
/>
);
};
const generateUI2=（数据）=>{
控制台日志（数据）；
返回数据.map（（e，i）=>{
返回(
);
});
};
返回(
案例1
{generateUI1（dataArray1）}
案例2
{generateUI2（dataArray2）}
);
}

它就像组件中的组件

您需要将

InputComponent

组件与

App

组件分开。 并将

setDataArray2

作为道具传递给它

从“react”导入{useState}；
导入“/styles.css”；
常量输入组件=（道具）=>{
返回(
{
让newData=[…props.data]；
newData[props.i]=e.target.value；
props.setDataArray2（新数据）；
}}
/>
);
};
导出默认函数App（）{
常量[dataArray1，setDataArray1]=useState([
“你好”，
“我的名字是testBot”，
“我是大四学生”
]);
常量[dataArray2，setDataArray2]=useState([
“你好”，
“我的名字是testBot”，
“我是大四学生”
]);
const generateUI1=（数据）=>{
控制台日志（数据）；
返回数据.map（（e，i）=>{
返回(
{
让newData=[…data]；
newData[i]=e.target.value；
setDataArray1（新数据）；
}}
/>
);
});
};
const generateUI2=（数据）=>{
控制台日志（数据）；
返回数据.map（（e，i）=>{
返回(
);
});
};
返回(
这是一个非常简单的应用程序，我为2个案例声明了2个状态

{`在案例1中，我使用状态dataArray1并创建一个输入标记数组
`}


{`在案例2中，我使用状态dataArray2并创建一个
其中只包含一个输入标记`}


现在的问题是，在案例1中，用户界面按要求运行，但在
案例2当我们键入任何内容时，输入失去焦点。

案例1
{generateUI1（dataArray1）}
案例2
{generateUI2（dataArray2）}
);
}

---

检查一下这个

它就像是组件中的组件

您需要将

InputComponent

组件与

App

组件分开。 并将

setDataArray2

作为道具传递给它

从“react”导入{useState}；
导入“/styles.css”；
常量输入组件=（道具）=>{
返回(
{
让newData=[…props.data]；
newData[props.i]=e.target.value；
props.setDataArray2（新数据）；
}}
/>
);
};
导出默认函数App（）{
常量[dataArray1，setDataArray1]=useState([
“你好”，
“我的名字是testBot”，
“我是大四学生”
]);
常量[dataArray2，setDataArray2]=useState([
“你好”，
“我的名字是testBot”，
“我是大四学生”
]);
const generateUI1=（数据）=>{
控制台日志（数据）；
返回数据.map（（e，i）=>{
返回(
{
让newData=[…data]；
newData[i]=e.target.value；
setDataArray1（新数据）；
}}
/>
);
});
};
const generateUI2=（数据）=>{
控制台日志（数据）；
返回数据.map（（e，i）=>{
返回(
);
});
};
返回(
这是一个非常简单的应用程序，我为2个案例声明了2个状态

{`在案例1中，我使用状态dataArray1并创建一个输入标记数组
`}


{`在案例2中，我使用状态dataArray2并创建一个
其中只包含一个输入标记`}


现在的问题是，在案例1中，用户界面按要求运行，但在
案例2当我们键入任何内容时，输入失去焦点。

案例1
{generateUI1（dataArray1）}
案例2
{generateUI2（dataArray2）}
);
}

---

选中此复选框，您将导致重新渲染，这将导致失去焦点。 因此，您可以按照用户“zb22”在回答中所述，将组件移动到范围App（）之外。 或者像这样调用组件：

<InputComponent data={data} i={i} />

此外，请记住不要将密钥与数据一起更改。 现在，当您的数据更改时，您的密钥将更改，这将导致重新渲染 因此，请从以下位置更改密钥：

<div key={`${data[i]}`}>

到某处

<div key={`${data[i]}`}>

<div key={`ui2_${i}`}>