Question

我正在通过ID从数据库中获取详细信息，希望将其显示到表中，但是出于最初的目的，我只想在没有表和其他东西的浏览器中显示..正在获取values.map不是一个函数，但是当我执行控制台时.log（values），得到了{title：“”，description：“”，标签：“”，photo：“”，loading：false，…} createdBlog：“” 说明：“” 错误：“” formData：“” getaRedirect：否载入中：false 照片：“” 标签：“” 标题：“” 原始：对象

做什么，请帮忙

import React, { useState, useEffect } from "react";
import "../../styles.css";
import { getoneBlog } from "../helper/coreapicalls";
import ImageHelper from "../helper/ImageHelper";

const Fullblog = ({ match }) => {
  const [values, setValues] = useState({
    title: "",
    description: "",
    tags: "",
    photo: "",
    loading: false,
    error: "",
    createdBlog: "",
    getaRedirect: false,
    formData: "",
  });

  const {
    title,
    description,
    tags,
    loading,
    error,
    createdBlog,
    getaRedirect,
    formData,
  } = values;

  const preload = (blogId) => {
    getoneBlog(blogId).then((data) => {
      //console.log(data);
      if (data.error) {
        setValues({ ...values, error: data.error });
      } else {
        // preloadCategories();
        setValues({
          ...values,
          title: data.title,
          description: data.description,
          tags: data.tags,
          formData: new FormData(),
        });
      }
    });
  };

  console.log(values);

  

  useEffect(() => {
    preload(match.params.blogId);
  }, []);

  

  

  return (
    <div>
      <div className="py-md-5 py-3">
        <div className="Fullblog ">
          {values.map((fullblog, index) => {
            return (
              <div>
                <h1 className="FullblogTittle">
                  Founder Leandra Medine Cohen announced the news to her
                  employees on a Zoom call earlier this week.
                  {fullblog.title}
                </h1>
                <p className="tags">tags </p>
                <img
                  src="https://cdn.pixabay.com/photo/2020/10/17/17/41/girl-5662873_960_720.jpg"
                  className="FullblogImg"
                  alt="img"
                />
                <ImageHelper />
                <p className="description">
                  CULTURE How to Celebrate Halloween at Home This Year From
                  horror movie marathons to Halloween-themed drive-in features
                  to virtual pumpkin carving parties, here's how to celebrate
                  Halloween safely this year. By Pahull Bains Date October 22,
                  2020 With cases on the rise in certain regions of Ontario ’s A
                  Little Blurry. The livestream will be viewable on demand for
                  24 hours for ticket holders. Get your tickets here.
                </p>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default Fullblog;

coreapicalls代码-

// get all Blogs
export const getBlogs = () => {
  return fetch(`${API}/blogs`, {
    method: "GET",
  })
    .then((response) => {
      return response.json();
    })
    .catch((err) => console.log(err));
};

//get a Blog
export const getoneBlog = (blogId) => {
  return fetch(`${API}blog/${blogId}`, {
    method: "GET",
  })
    .then((response) => {
      return response.json();
    })
    .catch((err) => console.log(err));
};

Answer 1

您可以在数组上使用.map()函数，但是您的状态似乎被设置为对象而不是数组。

Answer 2

检查以下几行：

{values.map((fullblog, index) => {

＆

const [values, setValues] = useState({ ... });  // This is an object

Reference

map（）方法创建一个新数组，其中填充了在调用array中的每个元素上调用提供的函数。

问题是，您正在对象上尝试map()，这就是它向您显示错误的原因。

Answer 3

您只能在数组变量上使用.map（），如前所述。

您可以简单地执行以下操作：

Object.keys（values），它将使用对象的键组成一个数组。

Object.keys(values).map( keys => console.log(values[key]) )

Answer 4

您在values上使用了对象解构，但是没有Object.prototype.map这样的方法... 您可以使用map来遍历Object.values(values)或如果要遍历键就可以遍历Object.keys(values)。代码：

Object.values(values).map((fullblog, index) => {
    // insert code here
});

错误：values.map不是函数（为什么会出现此错误）

4 个答案: