React 正确接收道具但未定义

Question

我正在将 props 传递给正确接收其值但未定义的组件。

const ImageView = () => {
  const { image } = useMedia();
  
  return image.map(img => (
    <Drag key={img.id} mediaId={img.id} pos={{x: img.x, y: img.y}} >
      <img src={backFiles + img.link} alt="" />
    </Drag>
  ));
};

Drag 组件正在执行此操作：

const Drag = ({children, mediaId, pos}) => {
  console.log(pos)
  ...
  return (
    <Article>
      {children}
    </Article>
  );
};

当我 console.log pos 看看会发生什么：

console.log(位置):

图片内容如下

console.log(图片):

控制台日志记录 mediaId 重现相同的错误。

知道我做错了什么吗？

Answer 1

image.map 需要 return 一些东西。错误可能从那里发生

    const ImageView = () => {
  const { image } = useMedia();
  
  return image.map(img => (
  return ( <Drag key={img.id} mediaId={img.id} pos={{x: img.x, y: img.y}} >
              <img src={backFiles + img.link} alt="" />
           </Drag>)
          ));
         };

Answer 2

ImageView 组件应该 return 一个组件，它目前 return 是一个数组。

将 ImageView 更改为以下内容：

const ImageView = () => {
  const { image } = useMedia();

  return (
    <>
      {image.map((img) => (
        <Drag key={img.id} mediaId={img.id} pos={{ x: img.x, y: img.y }}>
          <img src={backFiles + img.link} alt="" />
        </Drag>
      ))}
    </>
  );
};

React 正确接收道具但未定义

React is correctly receiving props but become undefined

undefined

reactjs

react-props