React 无法在功能组件中设置未定义的属性

Question

我正在学习 react.js 及其功能组件，我遇到了一个触发功能组件的可点击项目的问题：在任何点击之前，当页面加载时，我有一个错误 Uncaught TypeError: Cannot read未定义的属性（读数 'comments'）。错误是当我在中调用 {props.dish.comments}

我的功能 Dishdetail 组件代码是（我删除了不会导致错误的 RenderDish）：

function RenderComments({ comments }) {
  if (comments != null) {
    const rendercomments = comments.map((comment) => {
      return (
        <p key={comment.id} className="text-start">
          {comment.comment}
          <br />
          <br />
          -- {comment.author},{" "}
          {new Intl.DateTimeFormat("en-US", {
            year: "numeric",
            month: "short",
            day: "2-digit",
          }).format(new Date(Date.parse(comment.date)))}
          <br />
          <br />
        </p>
      );
    });
    return (
      <div className="container">
        <h4 className="text-start">Comments</h4>

        {rendercomments}
      </div>
    );
  } else {
    console.log("renderComments comments is null");
    return <div></div>;
  }
}
const Dishdetail = (props) => {
  return (
    <div className="row">
      <div className="col-12 col-md-5 m-1">
        <RenderDish dish={props.dish} />
      </div>

      <div className="col-12 col-md-5 m-1">
        <RenderComments comments={props.dish.comments} />
      </div>
    </div>
  );
};

export default Dishdetail;

我的调用组件是这样的：

import React, { Component } from 'react';
import Menu from './MenuComponent';
import {DISHES} from '../shared/dishes'
import Dishdetail from './DishdetailComponent';
import Header from './HeaderComponent'
class Main extends Component {
    constructor(props){
        super(props);
        this.state={dishes:DISHES,
        selectedDish:null,
    };
    }
    onDishSelect(dishId){
        this.setState({selectedDish:dishId});
        console.log(this.state.selectedDish)
    }

    render(){
      return (
        <div className="App">
            <Header/>
            <Menu dishes={this.state.dishes} onClick={(dishId)=> this.onDishSelect(dishId)}/>
            <Dishdetail dish={this.state.dishes.filter((dish)=>dish.id===this.state.selectedDish)[0]} />
        </div>
      );
    }
    }
export default Main;

dishes.js是这样的:

export const DISHES =
    [
        {
        id: 0,
        name:'Uthappizza',
        image: 'assets/images/uthappizza.png',
        category: 'mains',
        label:'Hot',
        price:'4.99',
        description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
        comments: [
            {
            id: 0,
            rating: 5,
            comment: "Imagine all the eatables, living in conFusion!",
            author: "John Lemon",
            date: "2012-10-16T17:57:28.556094Z"
            },

编辑：我的菜单代码是：

import React from 'react';
import { Card, CardImg,CardImgOverlay,CardText,CardBody,CardTitle } from 'reactstrap';

    function RenderMenuItem({dish,onClick}){
            return(
                    <Card onClick={()=>onClick(dish.id)}>
                      <CardImg width='100' src={dish.image} alt={dish.name} />
                      <CardImgOverlay>
                        <CardTitle>{dish.name}</CardTitle>

                      </CardImgOverlay>
                    </Card>
            );
    }
    const Menu = (props) => {
        const menu = props.dishes.map((dish) => {
            return (
              <div key={dish.id} className="col-12 col-md-5 m-1">
                <RenderMenuItem dish={dish} onClick={props.onClick}/>
              </div>
            );
        });
        return (
            <div className="container">
                <div className="row">
                      {menu}
                </div>
            </div>

        );

    }




export default Menu;

我尝试尝试使用 typeof comments undefined/catch 手动将 {props.dish.comments} 设置为 null，但出现错误，我无法设置仅可读的属性.

我不知道在盘子或评论上放一个 if/else 来调整代码，当我不点击时盘子和评论的可变状态是什么......显然 'undefined'？

如果你能在不使用 class 组件的情况下帮助我解决这个问题，那就太好了。（我也是javascript的初学者）

Answer 1

您可以使用 useState.

将 Main 重写为功能组件

⚠️不要不要复制dishes到本地状态⚠️

import { useState } from "react"

function Main({ dishes = [], initSelection = null }) {
  const [selection, setSelection] = useState(initSelection)
  const selectDish = dishId => event => { setSelection(dishId) }
  return <div className="App">
    <Header />
    <Menu dishes={dishes} onClick={selectDish} />
    { selection == null
      ? null
      : <Dishdetail dish={dishes.find(d => d.id == selection)} />
    }
  </div>
}

注意 Menu 如何使用 onClick -

function Menu({ dishes = [], onClick }) {
  return <div className="Menu">
    {dishes.map((dish, key) =>
      <a key={key} onClick={onClick(dish.id)}>{dish.name}</a>
    )}
  </div>
}

React 无法在功能组件中设置未定义的属性

React cannot set properties of undefined in a functionnal component

reactjs

functional-programming

components