javascript - React: object throws ".keys is not a function Error" - Stack Overflow

admin管理员组

文章数量:1398999

I'm aware that this error may be quite mon and have been answered several times before, but I couldn't find a solution.

My code always throws this error: ".map is not a function". I know that this happens because data is not an array. So I tried to solve this with .keys function but this throws the ".keys is not a function" error. I'm declaring const data in the parent ponent and want to use it in the child ponent.

I think my error depends on a false use of .keys. But after much Googling I'm still not one step further.

This is my Child-Code:

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;

This is home.jsx (parent):

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


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

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

export default Home;

This is working fine as long as const data is declared in the PostsRow.jsx, but when I try to declare it in Home.jsx and use props the above error throws.

I'm aware that this error may be quite mon and have been answered several times before, but I couldn't find a solution.

My code always throws this error: ".map is not a function". I know that this happens because data is not an array. So I tried to solve this with .keys function but this throws the ".keys is not a function" error. I'm declaring const data in the parent ponent and want to use it in the child ponent.

I think my error depends on a false use of .keys. But after much Googling I'm still not one step further.

This is my Child-Code:

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;

This is home.jsx (parent):

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


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

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

export default Home;

This is working fine as long as const data is declared in the PostsRow.jsx, but when I try to declare it in Home.jsx and use props the above error throws.

• javascript
• reactjs
• single-page-application

Share Improve this question Follow edited Apr 17, 2021 at 21:10 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Apr 15, 2021 at 18:42 Dennis1995Dennis1995 5522 silver badges99 bronze badges 2

• Many thanks. You are right. But this did not solve my error. Maybe there are several faults since I'm knew to react... – Dennis1995 Commented Apr 15, 2021 at 18:45
• 1 You are missin {} around your data prop in PostsRow ponent – Berk Kurkcuoglu Commented Apr 15, 2021 at 18:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

As data is an object. To get its keys, you should write: Object.keys(data).

And, you have a typo in props destructuring : it should be ({data}).

Your example data is simply an object, not an array, so you don't need to use map or Object.keys here, you can simply write:

<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>

PostsRow will be called with props and data is property of it. so you have to use it like

const PostsRow = ({data}) => {

And you've to convert your data to array like

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

本文标签： javascriptReact object throws quotkeys is not a function ErrorquotStack Overflow