在React中未定义,它无法识别道具-但是为什么呢?

时间:2019-11-23 20:14:41

标签: reactjs

我需要在static void Main(string[] args) { string RequestInput(string variableName) { Console.WriteLine($"{variableName}:"); return Console.ReadLine(); } Console.WriteLine("please enter the values of:"); var a = double.Parse(RequestInput("a")); var b = double.Parse(RequestInput("b")); var c = double.Parse(RequestInput("c")); } 文件中获得DishDetail组件,以从在DishDetailComponent.js的Menu组件中单击的特定项目渲染传递给它的道具。目前,我的MenuComponent.js语法使负载崩溃了。如果我将其取出,则它将加载页面,并且当我单击显示的菜肴之一时不会崩溃,但它不会执行任何操作。使用React工具时,它告诉我DishDetail组件有2个道具-菜和注释,但说它们是未定义的。

我的问题有两个(我想)-a)我没有renderComments()组件的正确代码来接收 selected 项目的道具。

和b)我如何编写正确的语法来访问菜品的comment属性,以便显示有关特定菜品的评论。

DishDetail

MenuComponent.js

class Menu extends Component { constructor(props) { super(props); this.state = { selectedDish: null }; } onDishSelect(dish){ this.setState({selectedDish: dish}); } render() { const menu = this.props.dishes.map((dish) => { return ( <div key={dish.id} className="col-12 col-md-5 m-1"> <Card onClick={() => this.onDishSelect(dish)}> <CardImg width="100%" object src={dish.image} alt={dish.name} /> <CardImgOverlay> <CardTitle>{dish.name}</CardTitle> </CardImgOverlay> </Card> </div> ); }); return ( <div className="container"> <div className="row"> {menu} </div> <DishDetail dish={this.state.dish} comments={this.state.comments}/> </div> ); } } export default Menu;

DishDetailComponent.js

1 个答案:

答案 0 :(得分:1)

似乎有几处要修复的东西。

首先。 DishDetail组件需要一个render()方法,该方法可以读取作为输入传递的属性。

第二。在MenuComponent中,statenull或包含{selectedDish: dish}。因此,您可以尝试访问this.state.selectedDish,但不能访问this.state.dishthis.state.comment

您可能想在console.log(state)函数中使用类似render()的东西,以便可以在控制台中查看状态是什么以及作为道具传递给其他组件的值。

希望有帮助。 iao。