Question

我使用 MongoDB 作为我的 Reactjs 项目的数据库。在这里，当我尝试连接数据库时，它给了我这个错误 - “未处理的拒绝（类型错误）：无法读取未定义的属性‘替换’”
这是App.js的代码

 import React from "react";
import Sidebar from "./Sidebar";
import Feed from "./Feed";
import Widgets from "./Widgets";
import "./App.css";
import { MongoClient } from "mongodb";

function App() {
  // Connection URI
  const uri =
    "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
  // Create a new MongoClient
  const client = new MongoClient(uri);
  async function run() {
    try {
      // Connect the client to the server
      await client.connect();
      // Establish and verify connection
      await client.db("posts").command({ ping: 1 });
      console.log("Connected successfully to server");
    } finally {
      // Ensures that the client will close when you finish/error
      await client.close();
    }
  }
  run();

  return (
    <div className="app">
      <Sidebar />
      <Feed />
      <Widgets />
    </div>
  );
}

export default App;

非常感谢任何帮助！

Answer 1

您需要为您的 React 应用程序创建一个后端并从那里连接到数据库。然后暴露一个端点，如 /api/posts 并在你的 React 应用程序中使用 fetch 或类似的东西调用它，例如

AddType image/webp .webp

<IfModule mod_rewrite.c>
  RewriteEngine On

  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} -f
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule ^/?(.+?)\.(jpe?g|png)$ /$1.$2.webp [NC,T=image/webp,E=EXISTING:1,E=ADDVARY:1,L]

  <IfModule mod_headers.c>
    <FilesMatch "(?i)\.(jpe?g|png)$">
      Header append "Vary" "Accept"
    </FilesMatch>
  </IfModule>
</IfModule>

未处理的拒绝（类型错误）：无法读取未定义的属性“替换”

1 个答案: