表单.用于图像上传的文件在react中不起作用

Question

我有这个代码来上传一个带有react的图像但它不起作用，我不知道为什么？有人能帮吗

return (
<div>
<FormContainer>
<h1>Edit Product</h1>
{loading ? <Loader /> : error ? <Message variant='danger'>{error}</Message>
: (
<Form onSubmit={submitHandler}>

<Form.Group controlId='image'>
<Form.Label>Image</Form.Label>
<Form.Control
type='text'
placeholder='Enter image'
value={image}
onChange={(e) => setImage(e.target.value)}
>
</Form.Control>
<Form.File
id='image-file'
label='Choose File'
onChange={uploadFileHandler}
custom
>
</Form.File>
{uploading && <Loader />}
</Form.Group>
<Button type='submit' variant='primary'>
Update
</Button>
</Form>
)}
</FormContainer >
</div>
)

问题出在表单上。文件cz当我删除它时，表单将加载

以下是我在控制台中得到的错误：react dom development js 28439未捕获错误：元素类型无效：

expected a string (for built-in components) 
or a class/function (for composite components) but got:
undefined. 
You likely forgot to export your component 
from the file it's defined in, 
or you might have mixed up default and named imports.
Check the render method of `ProductEditScreen`.

Answer 1

所以问题出在Form.File不是来自react bootstrap v2，它必须来自v1解决方案是取代这个：

<Form.File
id='image-file'
label='Choose File'
onChange={uploadFileHandler}
custom
>

使用这样的表单控制：

<Form.Control
type='file'
id='image-file'
label='Choose File'
custom
onChange={uploadFileHandler}
>

Answer 2

解决方案如下

<Form.Control
type='file'
controlId='image-file'
label='Choose File'
custom
onChange={uploadFileHandler}
>

请确保添加controlId，以避免出现警告。