![](/img/trans.png)
[英]React | Functional component throws error useState Object(…) is not a function
[英]React: object throws ".keys is not a function Error"
我知道这个错误可能很常见并且之前已经回答了好几次,但我找不到解决方案。
我的代码总是抛出这个错误:“.map 不是函数”。 我知道发生这种情况是因为 data 不是数组。 所以我尝试用.keys function 解决这个问题,但这会引发“.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 时,会抛出上述错误。
由于data
是 object。 要获取其密钥,您应该编写: Object.keys(data)
。
而且,你在 props 解构中有一个错字:它应该是({data})
。
您的示例数据只是一个 object,而不是一个数组,因此您不需要在这里使用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>
PostsRow 将使用 props 调用,而data
是它的属性。 所以你必须像使用它一样
const PostsRow = ({data}) => {
而且您必须将数据转换为数组,例如
const data = [{
title: "Ersti",
imagesrc: "./490.jpg",
url: "/meineposts"
}];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.