React状态显示来自每个动态生成的输入字段组件的不同值

Question

在过去的8个小时里，我一直在用头敲击键盘，试图弄清楚为什么每个输入字段在同一状态下显示不同的值。

这是代码-

const BeaconSettingsCard = (props) => {
const [settingsItems, setSettingsItems] = useState([]);
const handleAddBeaconBtnOnClick = () => {
const id = settingsItems.length;
const newItem = (
<InputItem
id={id}
key={id}
type="InputField"
title="Test Title"
value="Test Value"
onChange={(e) => handleBeaconIdInputFieldOnChange(e, id)}
/>
);
setSettingsItems((settingsItems) => [...settingsItems, newItem]);
};
const handleBeaconIdInputFieldOnChange = (e, id) => {
console.log("settingsItems: ", settingsItems); // each input field shows a different settingsItems value ??
};
let cardHeaderButton = (
<InputItem type="Button" width="150px" onClick={handleAddBeaconBtnOnClick}>
Click to Add
</InputItem>
);
return (
<SettingsCard
headerButton={cardHeaderButton}
settingsItems={settingsItems}
/>
);
};
export default BeaconSettingsCard;

当我记录"；settingsItems"；在onChange事件中，对于每个输入字段，我会得到不同的值。

在第一个动态生成的input字段中，它将settingsItems记录为[]。在第二个，它记录[{React Component}]。在第三个方面，它记录[{React Component}, {React Component}]等等。

这些都应该记录相同的状态值！我的朋友是一个反应奇才，似乎也不明白这一点。真希望这里有人能。非常感谢。

Answer 1

我通过将代码从React挂钩转换为普通的React组件来解决这个奇怪的问题。

不理想，但有效。希望如果有人遇到这样一个奇怪的问题，这个解决方案也会对你有效。