为什么当 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

为什么当 useState 数组元素改变时，反应文本输入没有改变？

Why is react text input not changing when useState array element changes?

arrays

reactjs

react-hooks

use-state