Javascript 更改数组项会创建其自身的无限嵌套副本吗？

我尝试在输入字段中设置一个数字，并将其保持在一个状态。但是，当我尝试设置数组的状态时，它不会被填充，当我尝试使用匿名函数时，它会创建如下内容

{
    "btm": {
        "btm": {
            "btm": {...}, 
            "top": 100}, 
        "top": 100}, 
    "top": 100
}

下面是执行此操作的代码：

const Numbers = (props) => {
    const [numbers, setNumbers] = useState({"btm": "1", "top": "100"});
    
    const fromNumber = (n) => {
        console.log(numbers);
        setNumbers((n) => {
            const copy = numbers;
            copy["btm"] = n;
            return copy;
        });
    }

return (
            <>
                <input variant="toolbar-input" defaultValue={numbers["btm"]} onChange={e => fromNumber(e.target.value)} />
            </>
);
}

---

在使用useState时，您可以执行以下操作：

const Numbers = (props) => {
  const [numbers, setNumbers] = useState({ btm: "1", top: "100" });

  const fromNumber = (n) => {
    console.log(numbers);
    setNumbers({...numbers, btm: n});
  };

  return (
    <>
      <input
        variant="toolbar-input"
        defaultValue={numbers["btm"]}
        onChange={(e) => fromNumber(e.target.value)}
      />
    </>
  );
};

---

请注意，映射有唯一的键，因此您可以继续使用ES6扩展语法。

您在这里覆盖了变量n

这里n是从输入接收的值：

const fromNumber = (n) => {

这里n是变量数的先前状态：

---

因此，您将旧的状态嵌套在新的状态中。

您在这里使用相同的变量名-const fromNumber=n=>{…，在这里使用setNumbersn=>{

您还可以使用ES6 Spread语法并将状态更新函数转换为：

setNumbers((prevNumbers) => ({
   ...prevNumbers,
   btm: n,
}));

---

有关更多信息：请参阅上的此问题

setNumbers((n) => {

setNumbers((prevNumbers) => ({
   ...prevNumbers,
   btm: n,
}));