Question

无法将属性从一个组件传递到另一个组件

2020-06-23

30

reactjs

我尝试将一个对象从我的 Card 组件传递到我的 FloatingActionButtons 组件。但是我没有成功，我得到了错误：

TypeError: Cannot read property 'name' of undefined

如果我只传递对象的一个属性，如 name、abteilung、bereich 等，那么它就可以工作。那么，我怎样才能将整个对象传递给组件？

Card.js

import FloatingButton from "./FloatingActionButtons";

export default function Card() {
const plan = new Plan("Max Mustermann", "woamen.jpg", "ITH/A", "IT", 13);

return (
     <FloatingButton azubi={plan}></FloatingButton>
   );

FloatingActionButtons.js

export default function FloatingActionButtons({ azubi }) {
  <Typography gutterBottom>{azubi.name}</Typography>
}

Plan.js

export default class Plan {
    constructor(name, image, abteilung, bereich, azubis) {
        this.name = name;
        this.image = image;
        this.abteilung = abteilung;
        this.bereich = bereich;
        this.azubis = azubis;
    }
}

Answer 1

我已创建 Codesandbox 尝试重现您的问题，似乎一切正常。请与您自己的代码进行比较并检查是否存在语法问题：例如，您的 FloatingActionButtons.js 代码段没有 return 关键字，但您收到的错误与该问题不符。

Answer 2

根据代码片段，代码必须正常工作。确保在更新组件时没有遗漏任何值。以下是根据您的代码编写的工作代码片段：

class Plan {
  constructor(name, image, abteilung, bereich, azubis) {
    this.name = name;
    this.image = image;
    this.abteilung = abteilung;
    this.bereich = bereich;
    this.azubis = azubis;
  }
}

function Card() {
  const plan = new Plan("Max Mustermann", "woamen.jpg", "ITH/A", "IT", 13);

  return (<FloatingButton azubi={plan} />);
}

function FloatingButton({
  azubi
}) { 
return (<p> {azubi.name}</p>);
}

ReactDOM.render(<Card />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>