在 react.js 中使用 map 方法时道具不起作用

Question

当我们将它们作为整个对象数组传递时，props 可以正常传递，但是当我通过使用 map 函数遍历数组来传递 props 时它不起作用。

import { React, useEffect, useState } from "react";

import axios from "axios";

import "./Home.css";
import Cardimg from "./Cardimg";
const Home = props => {
    return (
        <>
            <div className="header">PHOTO GALLERY</div>
            <div className="photos">
                {props.data?.map(e => {
                    <Cardimg data={e.ImgUrl}></Cardimg>;
                })}
            </div>
        </>
    );
};

export default Home;

在上面的代码中，当我在 Cardimg 组件中手动传递时道具正在传递......但是一旦我开始使用地图然后它就不起作用......就像道具没有到达组件一样。

下面是我的 Cardimg 组件

import React from 'react'

const Cardimg = (props) => {
  console.log(props.data);
    return (
    <div>{props.data}</div>
  )
}

export default Cardimg

Answer 1

您需要 return Cardimg 组件内部 map 回调函数。

像这样

{
    props.data?.map(e => {
        return <Cardimg data={e.ImgUrl}></Cardimg>;
    });
}

或者像这样

{
    props.data?.map(e => <Cardimg data={e.ImgUrl}></Cardimg>)
}

在 react.js 中使用 map 方法时道具不起作用

props are not working when using map method in react.js

javascript

reactjs

react-props