反應：object 拋出“.keys 不是 function 錯誤”

Question

我知道這個錯誤可能很常見並且之前已經回答了好幾次，但我找不到解決方案。

我的代碼總是拋出這個錯誤：“.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 時，會拋出上述錯誤。

Answer 1

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

Answer 2

PostsRow 將使用 props 調用，而data是它的屬性。 所以你必須像使用它一樣

const PostsRow = ({data}) => {

而且您必須將數據轉換為數組，例如

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