组件在点击按钮时没有更新，React

Question

我有一个父组件 "Menu "和一个子组件 "DishDetails"。子组件在点击按钮时返回一张卡片。当我第一次点击按钮时，它可以工作，但当我再次点击按钮时，该组件没有更新。当我再次点击按钮时，该组件没有更新。该组件应该在点击按钮后更新。

父组件

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


class Menu extends Component{
//The class base component must have a constructor with super statment
constructor(props){
    super(props);
    this.state ={
        dishSelection:null
    }
}

//Method when the user click on the image
onDish(dish){
    this.setState({dishSelection:dish})
}

renderDish(dish){
    if(dish!=null){
        return(
            <DishDetails dish = {dish}></DishDetails>
        )
    }
    else{
        return(
            <div></div>
        )
    }
}

//The component should implement the render method
render(){
    //Declare a variable for the defining the list 
    const media = this.props.dishes.map((dish)=>{
        return(
            <div className='col-12 col-md-5 m-2'>
                <Card onClick={()=>this.onDish(dish)} key={dish.id}>
                    <CardImg  src={dish.image} alt={dish.name} />
                    <CardImgOverlay>
                        <CardTitle>{dish.name}</CardTitle>
                    </CardImgOverlay>
                </Card>
            </div> 
        )
    })

    return(
        <div className='container'>
            <div className='row'>
                {media}
            </div>
            <div className='row'>
                <div className = 'col-12'>
                    {this.renderDish(this.state.dishSelection)}
                </div>
            </div>
        </div>
       )
    }
}
export default Menu;

儿童组件

import React , {Component} from 'react'
import {Card,CardImg,CardImgOverlay,CardTitle} from 'reactstrap'

class DishDetails extends Component{
constructor(props){
    super(props)
    this.state = {
        dish : this.props.dish
    }
}

render(){
    //const dish = this.props.dish;
    console.log(this.state.dish.name)
    return(
        <div>
            <div className = 'col-12 col-md-5'>
                <Card key={this.state.dish.id}>
                    <CardImg  src={this.state.dish.image} alt={this.state.dish.name} />
                    <CardImgOverlay>
                        <CardTitle>{this.state.dish.name}</CardTitle>
                    </CardImgOverlay>
                </Card>
            </div> 
            <div>

            </div>
        </div>
    )
}
}

export default DishDetails;

Answer 1

构造函数只在第一次时触发。如果你不需要改变子组件的值，就不要在状态中复制道具。将子组件中的this.state.dish改为this.props.dish。

class DishDetails extends Component{

render(){
    return(
        <div>
            <div className = 'col-12 col-md-5'>
                <Card key={this.props.dish.id}>
                    <CardImg  src={this.props.dish.image} alt={this.state.dish.name} />
                    <CardImgOverlay>
                        <CardTitle>{this.props.dish.name}</CardTitle>
                    </CardImgOverlay>
                </Card>
            </div> 
            <div>

            </div>
        </div>
    )
}
}

export default DishDetails;

如果你还想在父组件发生变化时更新状态，那么你应该看看这个链接:-。

https:/reactjs.orgdocsreact-component.html#static-getderivedstatefromprops。