Javascript Next js:TypeError:无法读取未定义的属性“map”

我已经在我的项目中使用了Next Js，我已经准备好了备份逻辑来显示我的数据，但是当我尝试通过useEffect钩子显示我的所有数据并使用map函数显示时，会出现如下错误： TypeError:无法读取未定义的属性“map”

我不知道问题出在哪里，我试过这样做：

import React, { useState, useEffect } from "react";
import Linkj from "next/link";
import Router from "next/router";
import { isAuth, getCookie } from "../../actions/auth";
import { create, getCagetories, removeCategory } from "../../actions/category";

const Category = () => {
  const [values, setValues] = useState({
    name: "",
    error: false,
    success: false,
    categories: [],
    removed: false,
  });
  const { name, error, success, categories, removed } = values;
  const token = getCookie("token");

  useEffect(() => {
    loadCategories();
  }, []);

  const loadCategories = () => {
    getCagetories().then((err, data) => {
      if (err) {
        console.log(err);
      } else {
        setValues({ ...values, categories: data });
      }
    });
  };

  const shwoCategories = () => {
    return categories.map((c, i) => {
      return (
        <button key={i} className="btn btn-outline-primary mr-1 mt-3">
          {c.name}
        </button>
      );
    });
  };

  const clickSubmit = (e) => {
    e.preventDefault();
    create({ name }, token).then((data) => {
      if (data.error) {
        setValues({ ...values, error: data.error, success: false });
      } else {
        setValues({ ...values, error: false, success: true, name: "" });
      }
    });
  };
  const handleChange = (e) => {
    setValues({
      ...values,
      name: e.target.value,
      error: false,
      success: false,
      removed: "",
    });
  };
  return (
    <React.Fragment>
      <form onSubmit={clickSubmit}>
        <div className="form-group">
          <label className="text-muted">Name</label>
          <input
            type="text"
            className="form-control"
            onChange={handleChange}
            value={name}
            required
          />
        </div>
        <div>
          <button type="submit" className="btn btn-primary">
            Create
          </button>
        </div>
      </form>
      {shwoCategories()}
    </React.Fragment>
  );
};

export default Category;

---

请提供任何建议。

像这样更新您的代码。问题是您必须使用“值.类别”而不是“类别”来获取类别列表

import React, { useState, useEffect } from "react";
import Linkj from "next/link";
import Router from "next/router";
import { isAuth, getCookie } from "../../actions/auth";
import { create, getCagetories, removeCategory } from "../../actions/category";

const Category = () => {
  const [values, setValues] = useState({
    name: "",
    error: false,
    success: false,
    categories: [],
    removed: false,
  });
  const { name, error, success, categories, removed } = values;
  const token = getCookie("token");

  useEffect(() => {
    loadCategories();
  }, []);

  const loadCategories = () => {
    getCagetories().then((err, data) => {
      if (err) {
        console.log(err);
      } else {
        setValues({ ...values, categories: data });
      }
    });
  };
  // Update this function
  const shwoCategories = () => {
    return values.categories.length ? values.categories.map((c, i) => {
      return (
        <button key={i} className="btn btn-outline-primary mr-1 mt-3">
          {c.name}
        </button>
      );
    }) : null;
  };
  // update end

  const clickSubmit = (e) => {
    e.preventDefault();
    create({ name }, token).then((data) => {
      if (data.error) {
        setValues({ ...values, error: data.error, success: false });
      } else {
        setValues({ ...values, error: false, success: true, name: "" });
      }
    });
  };
  const handleChange = (e) => {
    setValues({
      ...values,
      name: e.target.value,
      error: false,
      success: false,
      removed: "",
    });
  };
  return (
    <React.Fragment>
      <form onSubmit={clickSubmit}>
        <div className="form-group">
          <label className="text-muted">Name</label>
          <input
            type="text"
            className="form-control"
            onChange={handleChange}
            value={name}
            required
          />
        </div>
        <div>
          <button type="submit" className="btn btn-primary">
            Create
          </button>
        </div>
      </form>
      {shwoCategories()}
    </React.Fragment>
  );
};

export default Category;

---

这是说“类别”是未定义的。也许可以试试values.categories.map，看看效果是否更好。我已经在loadCategories函数try categories？中的categories中存储了数据。map可以防止错误，我认为categories是未定义的。谢谢，我解决了我的问题，实际上categories是未定义的，这是我的getCategories函数中的问题，该函数是API无法从后端加载数据。他对类别进行了分解，因此它与values.categories相同。您的逻辑是正确的！但我并没有从值中获取数据，而是从类别中解构数据，这些类别是我数据库中的重要数据。