UI无法使用React Hooks和表单提交在状态更新时重新呈现

Question

我正在尝试使用React
Hooks和表单更新UI。我设置了一个状态来监视表单上的值，当我单击“提交”时，我想将此值添加到数组（保持状态）并在UI上显示。我的问题是，当我提交值时，尽管它已添加到数组中（状态已更新），但UI仅在更改输入中的值时才更新。

我的组件如下：

const PushToArrayUpdateState = () => {

    const [array, setArray] = useState([]);
    const [formVal, setFormVal] = useState(``);

    const handleSubmit = event => {
        event.preventDefault();
        let updateArray = array;
        updateArray.push(formVal);
        console.log(updateArray);
        setArray(updateArray);
    };

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input type="text" name="arrayVal" onChange={e => setFormVal(e.target.value)} />
                <input type="submit" value="Submit" />
            </form>
            <div>
                {array.map((val, index) => <p key={index}>{val}</p>)}
            </div>
        </div>
    );
};

您也可以在以下 网址看到此[不]工作： https

//codesandbox.io/s/p3n327zn3q

是否有人对handleSubmit函数中的setArray为什么不自动导致组件重新呈现有任何建议？

Answer 1

代替

let updateArray = array;

试试这个：

const updateArray = [...array];

https://codesandbox.io/embed/qxk4k3zmzq

因为JS中的数组是引用值，所以当您尝试使用=复制它时，它将仅将引用复制到原始数组。