React 正确接收道具但变得未定义答案

【问题标题】：React is correctly receiving props but become undefinedReact 正确接收道具但变得未定义
【发布时间】：2021-10-19 15:22:20
【问题描述】：

我将 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(pos):

这是图片的内容。

console.log(图像)：

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

任何想法我做错了什么？

【问题讨论】：

图像数组是否有可能有2个正确的数据和一个空对象？
你能在ImageView组件中试试console.log(image)吗？
@Houssam 是的，它工作得很好。
@RafaelCaixeta 你能分享它显示的内容吗？我想知道image的内容是什么。
@RafaelCaixeta，我看到您在ImageView 中返回image.map，但您应该返回一个组件。您可以将 image.map 嵌套在像 return <>{image.map....}</> 这样的片段中吗

标签： reactjs undefined react-props

【解决方案1】：

ImageView 组件应该返回一个组件，它当前返回的是一个数组。

将 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>
      ))}
    </>
  );
};

【讨论】：

【解决方案2】：

image.map 需要返回一些东西。错误可能是从那里发生的

    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>)
          ));
         };

【讨论】：

我认为这不是错误，OP 只是使用正确的 ES6 语法进行返回。