我没有得到任何输出和错误，我不知道为什么

Question

我没有得到任何输出，我不知道为什么，但我在浏览器和命令提示符中都没有收到错误，所以我不清楚发生了什么。我在执行开始时遇到了一个错误，如下所示：

WebSocketClient.js:16 WebSocket 连接到 'ws://localhost:3000/ws' 失败

然后错误消失并且在重新加载后没有出现，我在谷歌中只得到一个错误，比如错误：

加载资源失败：服务器响应状态为 404（未找到）

在浏览器中执行时出现此错误。所以我不知道错误本身是什么

这是我的服务器端代码

import express from "express";
import bodyParser from "body-parser";
import mongoose from "mongoose";
import cors from "cors";
import postRoutes from "./routes/posts.js";

const app = express();

app.use(bodyParser.json({ limit: "30mb", extended: true }));
app.use(bodyParser.urlencoded({ limit: "30mb", extended: true }));
app.use(cors());
app.use("/posts",postRoutes);


// mongodb connection
const CONNECTION_URL = "mongodb+srv://memory:memory1213@abscluster.f5vt7.mongodb.net/? 
retryWrites=true&w=majority";
const PORT = process.env.PORT || 5000;

mongoose.connect(CONNECTION_URL, { useNewUrlParser:true, useUnifiedTopology: true })
.then(() => app.listen(PORT, () => {
    console.log("server running on port :",PORT)
}))
.catch((error) => console.log(error.message))

/* mongoose.set("useFindAndModify", false); */

客户端（app.js）

import React,{useEffect} from "react";
import { Container, AppBar, Typography, Grow, Grid} from "@material-ui/core";
import { useDispatch } from "react-redux";
import {getPosts} from "./actions/posts";
import memories from "./images/memories-Logo.png"
import Posts from "./components/Posts/Posts";
import Form from "./components/Form/Form";
import useStyles from "./styles";

function App() {
  const classes = useStyles();
  const dispatch = useDispatch();

  useEffect(()=> {
    dispatch(getPosts());
  },[getPosts])
  return (
    <Container maxWidth="lg">
      <AppBar className={classes.appBar} position="static" color="inherit">
        <Typography className={classes.heading} variant="h2" align="center">Memories</Typography>
        <img className={classes.image} src={memories} alt="memories" height="60"/>
      </AppBar>
      <Grow in>
        <Container>
          <Grid container justifyContent="space-between" alignItems="stretch" spacing={3}>
            <Grid item xs={12} sm={7}>
                <Posts />
            </Grid>
            <Grid item xs={12} sm={4}>
                <Form />
            </Grid>
          </Grid>
        </Container>
      </Grow>
    </Container>
  );
}

export default App;

客户端（index.js）

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from "react-redux";
import { legacy_createStore, applyMiddleware, compose } from "redux";
import thunk from 'redux-thunk';
import reducers from "./reducers"

const store = legacy_createStore(reducers, compose(applyMiddleware(thunk)))

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

reportWebVitals();

Answer 1

改变这个 const posts = useStyles(); to const posts = useSelector((state) => state.posts);

我想你在这里打错了，但如果你在上面使用它会显示