移除处于React状态的对象中的最后一项

Question

我正在将一个状态映射到输入字段中，并有一个处理程序通过向状态中添加新对象来创建新输入。有没有办法创建一个SINGLE按钮来删除状态中的最后一个对象？感谢你的帮助！

const [data, setData] = useState({
datapoint1: "",
datapoint2: "",
datapoint3: "",
datapoint4: ""   });
// This adds new objects to the state
const handleClick = () => {
setData({
...data,
[`datapoint${Object.keys(data).length + 1}`]: ""
});
};

//This dynamically changes the input keys and value stored in state 
const handleChange = (datapoint) => (event) =>
setData({
...data,
[datapoint]: event.target.value
});

<button onClick={handleClick}>Click to add</button>
// I would like another button here to remove last input 
{Object.keys(data).map((datapoint) => {
return (
<input
style={{ margin: "20px" }}
key={datapoint}
onChange={handleChange(datapoint)}
/>
);
})}

Answer 1

请记住，objects'不能保留键的顺序。

如果您需要保留订单，可以使用Maps代替

这是的演示

import React, { useState } from "react";
import ReactDOM from "react-dom";
function App() {
const [data, setData] = useState(
new Map(
Object.entries({
datapoint1: "",
datapoint2: "",
datapoint3: "",
datapoint4: ""
})
)
);
// This adds new objects to the state
const handleClick = () => {
const newData = new Map(data);
newData.set(`datapoint${data.size + 1}`, "");
setData(newData);
};
//This dynamically changes the input keys and value stored in state
const handleChange = (datapoint) => (event) => {
const newData = new Map(data);
console.log({ newData });
newData.set(datapoint, event.target.value);
setData(newData);
};
const handleDelete = () => {
const newData = new Map(data);
newData.delete(`datapoint${data.size}`);
setData(newData);
};
return (
<React.Fragment>
<button onClick={handleClick}>Click to add</button>
<button onClick={handleDelete}>Click to rmeove last</button>
// I would like another button here to remove last input
{[...data.keys()].map((datapoint) => {
return (
<input
style={{ margin: "20px" }}
key={datapoint}
onChange={handleChange(datapoint)}
/>
);
})}
</React.Fragment>
);
}
ReactDOM.render(<App />, document.getElementById("container"));

Answer 2

您正在为JsObjects查找delete关键字

const removeLastStateItem = () => {
let newData = { ...data };
delete newData[`datapoint${Object.keys(data).length}`];
setData(newData);
};

delete obj['my_key']-从obj中删除my_key密钥