arrays - 为什么当 useState 数组元素发生变化时反应文本输入没有变化？

Question

function Example() {
    const [strings, setStrings] = useState(["hi","yo"]);

    return (
      <div>
         <input name='foo' type="text" value={strings[0]}  onChange={setElement} />
      </div>
    );

    function setElement(e){
        let copyStrings = strings; 
        copyStrings[0] = e.target.value; 
        setStrings(copyStrings)
    }
 }

当我在文本输入框中键入一个键时，我可以在 react devtools 中看到 useState 挂钩的状态已更新为包含该键，但输入中显示的文本不会改变。为什么会这样，我该如何解决？
我有一组值，我希望用户能够在输入控件中进行编辑。

Answer 1

let copyStrings = strings是浅拷贝。您正在复制对数组的引用

你需要做一个深拷贝。有几个选项：

let copyStrings = [...strings]; //works with arrays 或者 let copyStirngs = JSON.parse(JSON.stringify(strings)); // works with objects as well