将设置输入值反应到不可编辑的对象属性

Question

我正在将输入的值设置为对象的属性（来自状态）。 我有一个onChange事件来更新状态。 但是，当我尝试输入时，它实际上并没有在输入中更新。 如果我不使用对象而只有一个字符串，它就可以正常工作。 我怎样才能解决这个问题？

问题演示
我的代码：

import React from "react";

export function App() {
  const [data, setData] = React.useState({
    test: "hello"
  });
  
  const change = (e) => {
    data.test = e.target.value;
    setData(data);
  };

  return <input value={data.test} onChange={change}></input>;
}

Answer 1

根据Aman Sadhwani的评论，我使用扩展语法来更新状态而不修改原始对象。

const change = (e) => {
    setData({
        ...data,
        test: e.target.value
    });
};

Answer 2

谢谢@Aman Sadhwani。 使用 Spread 运算符更新状态。

import React from "react";

export function App() {
  const [data, setData] = React.useState({
    test: "hello"
  });
  
  const change = (e) => {
    setData({
    ...data
    test:e.target.value
    });
  };

  return <input value={data.test} onChange={change}></input>;
}