UI不使用React Hooks和表单提交重新呈现状态更新

问题描述 投票:0回答:1

我正在尝试使用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>
    );
};

您还可以看到[not]在:https://codesandbox.io/s/p3n327zn3q工作

有没有人有任何建议,为什么handleSubmit函数中的setArray不会自动导致组件重新渲染?

reactjs react-hooks
1个回答
0
投票

代替

let updateArray = array;

试试这个:

const updateArray = [...array];

https://codesandbox.io/embed/qxk4k3zmzq

因为JS中的数组是引用值,所以当您尝试使用=复制它时,它只会复制对原始数组的引用。

© www.soinside.com 2019 - 2024. All rights reserved.