Form.File 正在调用错误 React.jsx：类型无效 - 需要字符串或类/函数（对于复合组件）但得到：未定义

Question

我正在尝试使用与 multer 进行反应将图像上传到网站。在这个过程中我陷入困境，因为 Form.File 未定义，我不知道如何克服这个问题。

这是 ProductEditScreen.js

import React, { useState, useEffect } from "react";
import { Form, Button } from "react-bootstrap";
import FormContainer from "../components/FormContainer";

const ProductEditScreen = () => {
  const [image, setImage] = useState("");
  const [uploading, setUploading] = useState(false);
  const uploadFileHandler = async (e) => {
    const file = e.target.files[0];
    const formData = new FormData();
    formData.append("image", file);
    setUploading(true);
  };
  const submitHandler = (e) => {
    console.log("action");
  };

  return (
    <>
      <FormContainer>
        <Form onSubmit={submitHandler}>
          <Form.Group controlId="image">
            <Form.Label>Image</Form.Label>
            <Form.Control
              type="text"
              placeholder="Enter image url"
              value={image}
              onChange={(e) => setImage(e.target.value)}
            ></Form.Control>
            <Form.File
              id="image-file"
              label="Choose File"
              custom
              onChange={uploadFileHandler}
            ></Form.File>
          </Form.Group>

          <Button type="submit" variant="primary">
            Update
          </Button>
        </Form>
      </FormContainer>
    </>
  );
};

export default ProductEditScreen;

并且此 ProductEditScreen 在 App.js 中使用，因为

import ProductEditScreen from "./screens/ProductEditScreen";
const App = () => {
  return (
    <BrowserRouter>
      <Header />
      <main className="py-3">
        <Container>
          <Routes>
            <Route
              path="/admin/product/:id/edit"
              element={<ProductEditScreen />}
            />
          </Routes>
        </Container>
      </main>

      <Footer />
    </BrowserRouter>
  );
};

控制台中显示的错误是：

Warning: React.jsx: type is invalid -- 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 your code at ProductEditScreen.js:30.
    at ProductEditScreen (http://localhost:3000/static/js/bundle.js:5892:76)
    at Routes (http://localhost:3000/static/js/bundle.js:60546:5)
    at div
    at http://localhost:3000/static/js/bundle.js:27569:5
    at main
    at Router (http://localhost:3000/static/js/bundle.js:60479:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:59955:5)
    at App
    at Provider (http://localhost:3000/static/js/bundle.js:57170:20)

react-dom.development.js:25058 
        
       Uncaught Error: Element type is invalid: 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`.
    at createFiberFromTypeAndProps (react-dom.development.js:25058:1)
    at createFiberFromElement (react-dom.development.js:25086:1)
    at createChild (react-dom.development.js:13446:1)
    at reconcileChildrenArray (react-dom.development.js:13719:1)
    at reconcileChildFibers (react-dom.development.js:14125:1)
    at reconcileChildren (react-dom.development.js:16990:1)
    at updateHostComponent (react-dom.development.js:17632:1)
    at beginWork (react-dom.development.js:19080:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)

如何解决这个问题？ 或者是否有任何其他替代方法，我可以在选择文件时调用我的方法 uploadFileHandler 。

Answer 1

检查你的react-bootstrap版本。 React-bootstrap 版本 v2.5.0 (Bootstrap 5.2) 已删除所有文件-相关组件。

需要使用 代替。