Laravel + React - 初始输入状态验证失败答案

【问题标题】：Laravel + React - Initial Input State Failing ValidationLaravel + React - 初始输入状态验证失败
【发布时间】：2021-02-21 20:41:14
【问题描述】：

我对 Laravel 和 React 还很陌生，我似乎遇到了问题。

我有一个用这些值初始化输入状态的表单

const empty = {
    name: '',
    email: '',
    phone: '',
    topic: '',
    message: '',
};

const [input, setInput] = useState(empty);

const handleChange = (e) => setInput({
    ...input,
    [e.currentTarget.name]: e.currentTarget.value
});

<input 
    name="phone" 
    type="text" 
    className={ input_classes }
    onChange={ handleChange }
    value={ input.phone }
/>
{
  errors.phone !== null &&
  <InputError message={ errors.phone } />
}

所以我的问题是何时提交此表单。电话以外的所有字段都是必需的。这是此表单的当前验证规则

    request()->validate([
        'name' => 'bail|required|max:255',
        'email' => 'bail|required|email',
        'phone' => 'numeric',
        'topic' => 'bail|required|max:255',
        'message' => 'required',
    ]);

提交除了手机以外的所有内容的表单会导致服务器发送一个 422 错误消息，即手机必须是数字。我知道这与将输入状态初始化为'' 有关。

我在反应方面处理不正确吗？尝试使用 undefined 或 null 值初始化状态未成功。

【问题讨论】：

标签： reactjs laravel

【解决方案1】：

好吧，你也必须将你的规则声明为nullable。

https://laravel.com/docs/8.x/validation#rule-nullable

所以，基本上：

'phone' => 'numeric|nullable',

【讨论】：