![](/img/trans.png)
[英]trying to console.log(req,body.name) in express app but it shows undefined
[英]console.log shows that the prop has attributes name and number, but they are undefined
所以我有以下代码,我想在返回 props.pages 的 Part 组件内返回一本书的页数。 console.log(props) 打印出书籍的属性(名称和页数)。 但是,当通过 props.pages 或 props.name 在 Part 组件中访问它们时,它返回 undefined?
我将如何解决这个问题
const Part = (props) => {
console.log(props);
return <p>{props.pages}</p>;
};
const Content = (props) => {
console.log(props);
return <Part props={props} />;
};
const App = () => {
const book1 = {
name: "Harry Potter",
pages: 108,
};
return (
<div>
<Content book={book1} />
</div>
);
};
export default App;
您已将“道具”包装在另一个“道具”中。 当你这样做时:
<Content book={book1} />
Content
组件中的props
对象有一个名为book
的属性。 所以当你这样做时:
<Part props={props} />
Part
组件中的props
对象有一个名为props
的属性。 该属性是一个具有名为book
的属性的对象。 您需要引用该属性:
return <p>{props.props.pages}</p>;
或者,您可以更明确地传递值:
<Part pages={props.pages} />
或者传播props
对象的属性以隐式传递所有这些属性:
<Part {...props} />
在任何一种情况下,您都可以直接访问该属性:
return <p>{props.pages}</p>;
尝试这个 :
const Part = (data) => {
const { props } = data;
return <p>{props.book.pages}</p>
};
演示: https://codesandbox.io/s/vigorous-jepsen-lqjs01?file=/src/App.js:24-113
://codesandbox.io/s/vigorous-jepsen-lqjs01?file=/src/App.js:24-113
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.