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

Question

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

{
    "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)} />
            </>
);
}

Answer 1

当你使用 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 扩展语法。

Answer 2

您在这里覆盖了变量n。

const fromNumber = (n) => {
  console.log(numbers);
  setNumbers((n) => {
    const copy = numbers;
    copy["btm"] = n;
    return copy;
  });
}

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

const fromNumber = (n) => {

这里n是变量numbers之前的状态：

setNumbers((n) => {

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

Answer 3

您在此处使用相同的变量名 - const fromNumber = (n) => {... 和此处为 setNumbers((n) => {...。

您也可以使用 ES6 传播语法并将状态更新功能转换为：

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