react-dom.production.min.js:216 "TypeError: s.map 不是函数"

Question

由于此代码，我有以下错误react-dom.production.min.js:216 "TypeError: s.map is not a function：

sidebar.jsx

const [cats, setCats] = useState([]);

  useEffect(() => {
    const getCats = async () => {
      const res = await axios.get("/categories");
      setCats(res.data);
    };
    getCats();
  }, []);

...

<span className="sidebarTitle">CATEGORIES</span>
        <ul className="sidebarList">
          {cats.map((c) => (
            <Link to={`/?cat=${c.name}`} className="link">
              <li className="sidebarListItem">{c.name}</li>
            </Link>
          ))}
        </ul>

我想在使用 MERN 制作的网站的侧边栏中显示这些类别。

重现它的代码：

index.js（在服务器部分）

const mongoose = require("mongoose");
const authRoute = require("./routes/auth");
const userRoute = require("./routes/users");
const postRoute = require("./routes/posts");
const categoryRoute = require("./routes/categories");
const multer = require("multer");
const path = require("path");

dotenv.config();
app.use(express.json());
app.use("/images", express.static(path.join(__dirname, "/images")));

mongoose
  .connect(process.env.MONGO_URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useCreateIndex: true,
    useFindAndModify: true
  })
  .then(console.log("Connected to MongoDB"))
  .catch((err) => console.log(err));
  

app.use("/api/categories", categoryRoute);

app.listen("3000", () => {
  console.log("Backend is running.");
});

routes/categories.js

const router = require("express").Router();
const Category = require("../models/Category");

router.post("/", async (req, res) => {
  const newCat = new Category(req.body);
  try {
    const savedCat = await newCat.save();
    res.status(200).json(savedCat);
  } catch (err) {
    res.status(500).json(err);
  }
});

router.get("/", async (req, res) => {
    try {
      const cats = await Category.find();
      res.status(200).json(cats);
    } catch (err) {
      res.status(500).json(err);
    }
  });

module.exports = router;

models/Category.js

const mongoose = require("mongoose");

const CategorySchema = new mongoose.Schema(
  {
    name: {
      type: String,
      required: true,
    },
  },
  { timestamps: true }
);

module.exports = mongoose.model("Category", CategorySchema);

我现在想将所有内容传递给前端 (REACT) 以将其显示在屏幕上。前端对应的代码命名为sidebar.jsx（我把代码放在上面一点）。

你有什么办法改正吗？

Answer 1

从 api 获取的数据不是数组格式。请检查您的 api 是否返回数组。