Formik 拋出錯誤：JSX 道具不應在 React 中使用函數

Question

這個test.tsx ：

       <Form>
          <Field name='name' validate={validateFunc}>
            {({ field, form }) => (
                <FormControl isInvalid={form.errors.name && form.touched.name}>
                  <FormLabel htmlFor='name'>Default</FormLabel>
                  <Input {...field} id='name' placeholder='name' />
                  <FormErrorMessage>{form.errors.name}</FormErrorMessage>
                </FormControl>
            )}
          </Field>

產量

Error: JSX props should not use functions  react/jsx-no-bin

我知道為什么這很糟糕，但我不知道如何改變它。

Answer 1

<Field name='name' validate={() => validateFunc}>
  {({ field, form }) => (
      <FormControl isInvalid={form.errors.name && form.touched.name}>
        <FormLabel htmlFor='name'>Default</FormLabel>
        <Input {...field} id='name' placeholder='name' />
        <FormErrorMessage>{form.errors.name}</FormErrorMessage>
      </FormControl>
  )}
</Field>

也許你可以試試這個來解決你的問題