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 Spread语法。

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 Spread语法并将状态更新功能转换为此：

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

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

3 个答案: