react使用useState添加新元素，但是执行一次添加了两个元素

项目场景：

react开发，使用useState，在文本框接收到用户输入、用户点击提交之后向列表里插入新元素：

const [rows, setRows] = useState(["example.docx"]);

const handleSubmit = () => {
        setOpen(false);
        setRows(() => {
            rows.push(inputValue);
            return [...rows]
        })
    };

问题描述：

插入新元素成功了，但是插入了两个新元素，所以可能是setState由于某种原因执行了两次

原因分析：

并不是因为函数写错了，是因为严格模式，官网的解释：

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:
Class component constructor, render, and shouldComponentUpdate methods
Class component static getDerivedStateFromProps method
Function component bodies
State updater functions (the first argument to setState)
Functions passed to useState, useMemo, or useReducer
Note:
This only applies to development mode. Lifecycles will not be double-invoked in production mode.

from:https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

解决方案：

去除严格模式，如果是create-react-app,在src下的index.tsx中注释掉：

ReactDOM.render(
    //<React.StrictMode>
        <App/>
    //</React.StrictMode>
    ,
    document.getElementById('root')
);