onChange 触发但只执行一半的功能？

Question

我正在尝试验证电子邮件地址的输入字段。实际的验证工作，状态更新和它周围的一切工作。但是，一旦验证了虚假电子邮件，我注意到一个奇怪的行为。

注意：我更改了状态和属性的名称以使其更通用和可读。

<TextField
    label = {emailFieldAttributes.label}
    type = {emailFieldAttributes.type}
    onChange = { event => {
        onChangeHandler(event)
    }}
    id = {emailFieldAttributes.id}
    value = {state.value_email}
    InputProps = {{
        autoComplete: 'off',
        inputMode: 'string'
    }}
    error = {state.error.value}
    ref = {ref}
></TextField>

function onChangeHandler(event)
    {
        if (event.target.id.includes('cc'))
        {
            setState({...state, value_cc: event.target.value});
        }
        else if (event.target.id.includes('body'))
        {
            setState({...state, value_body: event.target.value});
        }
        else
        {
            setState({...state, value_email: event.target.value});
        }
        
        if (state.error != initialErrorState
        )
        {
            resetEmailTooltip();
        }
    }

function resetEmailTooltip()
{
    setEmailStateValues(
    {
        ...state,
        error: resetErrorState
    });
}

在提交按钮的 onClick 中，我运行验证，它会正确更新状态并显示工具提示。事实上，除了 1 个轻微的不良行为外，onChange 可以正常工作。每当验证确实返回 false 并更新 state.error 时，都会显示一个工具提示。下次对输入字段进行更改时，第一个事件仅触发 resetEmailTooltip(); 并且不会更新状态值。

逐步 - 当前行为

1. 添加格式不正确的电子邮件地址：'test@.test'
2. 按提交
3. 验证
4. 显示工具提示
5. 首先通过按下例如更改输入字段键盘上的“b”导致 工具提示被移除
6. 第二次按下“b”将导致“test@b.test”

逐步 - 期望的行为

1. 添加格式不正确的电子邮件地址：'test@.test'
2. 按提交
3. 验证
4. 显示工具提示
5. 首先通过按下例如更改输入字段键盘上的“b”导致 工具提示被删除并导致“test@b.test”

我不明白为什么它需要第二个事件来触发状态更新？关于如何触发 onChange，我的思维过程是否有问题？

Answer 1

我又挖了一点，发现 event.target.value 确实有点不稳定，但这并不是我问题的真正原因。我的问题源于使用代码中可以看到的 2 个 setStates，我应该早点发现这一点，但刚接触 React 需要一些时间才能弄清楚。

因此，即使事件实际上尝试更新状态，setState 的异步性质似乎被resetEmailTooltip 函数中的第二个 setState 覆盖。我通过将 onChangeHandler 和 resetEmailTooltip 更改为如下所示解决了这个问题（注意：我不喜欢处理这个问题的代码量，所以我稍后会尝试重写代码） ：

function onChangeHandler(event)
{

    if (state.error != initialErrorState )
    {
        resetEmailTooltip(event);
    }
    else
    {
        if (event.target.id.includes('cc'))
        {
            setState({...state, value_cc: event.target.value});
        }
        else if (event.target.id.includes('body'))
        {
            setState({...state, value_body: event.target.value});
        }
        else
        {
            setState({...state, value_email: event.target.value});
        }
    }
}

和

function resetEmailTooltip(event)
{
    if (event.target.id.includes('cc'))
    {
        setState(
        {
            ...state,
            value_cc: event.target.value,
            error: resetErrorState
        });
    }
    else if (event.target.id.includes('body'))
    {
        setState(
        {
            ...state,
            value_body: event.target.value,
            error: resetErrorState
        });
    }
    else
    {
        setState(
        {
            ...state,
            value_email: event.target.value,
            error: resetErrorState
        });
    }
}

简短的故事是，我在两个函数中都用 event.target.value 更新了状态，并调用了一个 setState 而不是两个。这确保了 event.target.value 已设置，并且我不需要调用这两个 setStates。但是，这仍然感觉很笨拙，我认为有一种方法可以进一步缩短此代码并摆脱几个 if 语句，我会研究一下。

---

更新： 由于使用相同的值更新本地状态不会导致重新渲染，因此我决定删减更多代码，甚至删除 resetEmailTooltip(event) 函数。我将onChangeHandler(event) 更改为以下代码，它的工作方式与我想要的完全一样，我什至还需要对其进行一些清理。如果可能的话，我会考虑在 setState 中设置内部条件，但我不确定这是否允许。这是目前的最终结果，如果他们像我遇到同样的问题一样遇到困难，希望它可以帮助任何人。

function onChangeHandler(event)
{
    const resetErrorState = state.initialErrorState;

    if (event.target.id.includes('cc'))
    {
        setState(
            {
                ...state,
                value_cc: event.target.value,
                error: resetErrorState
            }
        );
    }
    else if (event.target.id.includes('body'))
    {
        setState(
            {
                ...state,
                value_body: event.target.value,
                error: resetErrorState
            }
        );
    }
    else
    {
        setState(
            {
                ...state,
                value_email: event.target.value,
                error: resetErrorState
            }
        );
    }
}