反应：对象抛出“.keys 不是函数错误”答案

【问题标题】：React: object throws ".keys is not a function Error"反应：对象抛出“.keys 不是函数错误”
【发布时间】：2021-04-15 18:42:11
【问题描述】：

我知道这个错误可能很常见并且之前已经回答过多次，但我找不到解决方案。

我的代码总是抛出这个错误：“.map 不是函数”。我知道发生这种情况是因为 data 不是数组。所以我试图用 .keys 函数解决这个问题，但这会引发“.keys 不是函数”错误。我在父组件中声明了 const 数据，并想在子组件中使用它。

我认为我的错误取决于对 .keys 的错误使用。但是经过多次谷歌搜索后，我仍然没有更进一步。

这是我的子代码：

import React from "react";
import Card from 'react-bootstrap/Card';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import Container from 'react-bootstrap/Container';
import {Link} from 'react-router-dom'

const PostsRow = (data) => {
     

{return (
    
    <Container>
      <Row>
        {data.keys(data).map((data) => {
          console.log(data + "is mount")
              return (
        <Col className="col-6 col-md-6 col-lg-3 card">
            <Link to={data.url}>
              <Card className="  text-center ">
                <Card.Img variant="top" src={data.imagesrc} />
                <Card.Body>
                  <Card.Title>{data.title}</Card.Title>
                </Card.Body>
              </Card>
            </Link>
          </Col>
        );
      })}
      </Row>
    </Container>
  );
};

export default PostsRow;

这是 home.jsx（父级）：

import React from "react";
import './route.css';
import PostsRow from "../components/Content/PostsRow";


const Home = () => {
    
const data = {
  
    title: "Ersti",
    imagesrc: "./490.jpg",
    url: "/meineposts" 
};

  return (
    <div> 
      <PostsRow data={data}/>
  </div>
  );
};

export default Home;

只要在 PostsRow.jsx 中声明 const 数据就可以正常工作，但是当我尝试在 Home.jsx 中声明它并使用 props 时，会抛出上述错误。

【问题讨论】：

非常感谢。你说的对。但这并没有解决我的错误。也许有几个错误，因为我知道反应......
你在 PostsRow 组件中的数据属性周围错过了{}

标签： javascript reactjs single-page-application

【解决方案1】：

因为data 是一个对象。要获取它的密钥，您应该写：Object.keys(data)。

而且，你在 props destructuring 中有一个错字：应该是 ({data})。

您的示例数据只是一个对象，而不是数组，所以这里不需要使用map 或Object.keys，您可以简单地写：

<Col className="col-6 col-md-6 col-lg-3 card">
  <Link to={data.url}>
    <Card className="text-center">
      <Card.Img variant="top" src={data.imagesrc} />
      <Card.Body>
        <Card.Title>{data.title}</Card.Title>
      </Card.Body>
    </Card>
  </Link>
</Col>

【讨论】：

【解决方案2】：

PostsRow 将使用 props 调用，data 是它的属性。所以你必须像使用它一样

const PostsRow = ({data}) => {

您必须将数据转换为数组，例如

const data = [{
    title: "Ersti",
    imagesrc: "./490.jpg",
    url: "/meineposts" 
}];

【讨论】：