React 意外调用函数答案

【问题标题】：React is calling function unexpectedlyReact 意外调用函数
【发布时间】：2020-08-13 02:59:32
【问题描述】：

这是我的登录组件：

const Login = () => {
    const [user, setUser] = useState("");
    const [pass, setPass] = useState("");

    return (
        <div>
            <p>Login</p>
            <input
                type="text"
                onChange={(e) => {
                    setUser(e.target.value);
                }}
            />
            <input
                type="password"
                onChange={(e) => {
                    setPass(e.target.value);
                }}
            />


            <button onClick={submit(user, pass)}>
                Submit
            </button>
        </div>
    );
};

它呈现在我的网页上，但每当我输入这两个：文本和密码时，它都会调用submit() 函数。查看我的代码，我只设置了 onClick 来调用submit 函数。

我的代码有问题吗？

编辑：删除类名以便于查看

【问题讨论】：

另一种选择是将您的 submit 函数转换为像这样的柯里化函数 - const submit = (user, pass) => () => {...}
为我工作，但我想我会在 onClick 中使用 () => {...}，因为我会因为在我的函数中有双参数受体而感到困惑。谢谢顺便说一句！

标签： javascript node.js reactjs ecmascript-6

【解决方案1】：

您在每次渲染时都调用了submit 函数。 onClick 接受一个函数，但您是直接调用一个函数。

<button onClick={submit(user, pass)}>
   Submit
</button>

将被替换为

<button onClick={()=>submit(user, pass)}>
   Submit
</button>

【讨论】：

Why shouldn't JSX props use arrow functions or bind?
当然是@JosephSible-ReinstateMonica，但性能只有在衡量时才重要。用户没有询问性能问题。他在基本代码方面遇到了麻烦。他最终会遇到性能问题，然后他会询问性能。
但是为什么要教我们以后必须改正的坏习惯呢？为什么不第一次教正确的方法？这是对useCallback 的一次额外调用，问题中的代码已经在使用其他钩子，所以它完全不是一个新概念。
这不是坏习惯@JosephSible-ReinstateMonica。过早的优化是万恶之源。如果内联函数这么糟糕，那么 react 根本就不应该支持它们。
我不会称这是过早的优化。他们试图禁止它：有一个名为jsx-no-lambda 的 linter 规则。他们不能做更多的事情，因为他们只是一个 UI 库而不是语言。

【解决方案2】：

试试：

const Login = () => {
    const [user, setUser] = useState("");
    const [pass, setPass] = useState("");

    const onSubmit = () => {
       submit(user,pass)
    }

    return (
        <div>
            <p>Login</p>
            <input
                type="text"
                onChange={(e) => {
                    setUser(e.target.value);
                }}
            />
            <input
                type="password"
                onChange={(e) => {
                    setPass(e.target.value);
                }}
            />


            <button onClick={onSubmit}>
                Submit
            </button>
        </div>
    );
};

【讨论】：