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

【问题标题】：React state showing differing values from each dynamically generated input field component反应状态显示来自每个动态生成的输入字段组件的不同值
【发布时间】：2021-07-11 23:15:45
【问题描述】：

在过去的 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;

当我在每个输入字段的 onChange 事件中记录“settingsItems”状态时，我得到不同的值。

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

这些都应该记录相同的状态值！我的反应专家朋友似乎也无法弄清楚这一点。真的希望这里有人可以。谢谢。

【问题讨论】：

标签： reactjs react-hooks state

【解决方案1】：

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

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

【讨论】：