Javascript firebase+；反应，设置状态似乎不会触发重新渲染

我正在使用firebase作为后端，并且正在为一个餐厅实体创建详细视图。一家餐厅有一系列的菜品ID，基于此，我想在查看餐厅时列出菜品

在dish列表组件中，我得到了dish id数组作为道具。然后我检查每个盘ID并从firebase获取盘数据。我在componentWillReceiveProps中这样做是为了获取父组件中的最新状态更新

以下是菜品列表组件：

class DishList extends Component {
    constructor(props){
        super(props)
        this.state = {
            Dishes: []
        }
    }

    componentWillReceiveProps(props) {
        const tempDishes = []
        props.dishes.map(dish => {
            firebaseDishes.child(dish).on("value", snap => {
                if (tempDishes.findIndex(x => x.id === snap.key) == -1) {
                    // push only if id doesn't exist
                    tempDishes.push({
                        id: snap.key,
                        name: snap.val().name,
                        price: snap.val().price
                    })
                    this.setState({
                        Dishes: tempDishes
                    })
                } else {
                    const updatedTempDishes = tempDishes.slice()
                    updatedTempDishes[updatedTempDishes.findIndex(x => x.id === snap.key)] = {
                        id: snap.key,
                        name: snap.val().name,
                        price: snap.val().price
                    }
                    this.setState({
                        Dishes: updatedTempDishes
                    })
                }
            })
        })
    }

    render(){
        return(
            <div className="dishes">
            {
                this.state.Dishes.map(dish => {
                    return(
                        <DishListItem key={dish.id} 
                                    DishId={dish.id}
                                    DishName={dish.name} 
                                    DishPrice={dish.price}/>
                    )
                })
            }
            </div>
        )
    }
}

---

我们非常感谢任何关于这可能发生的原因的提示

在您的else条件中，UpdatedTempDiscars是否在设置状态之前对dish进行了更改？@VijayMenon是的，UpdatedTempDiscars对dish进行了更改。您是否可以共享父组件和渲染代码？@VijayMenon确定，我已编辑了我的问题。您是否需要手动触发重新渲染？

class Place extends Component {
    constructor(props){
        super(props)
        this.state = {
            Place: {
                name: '',
                address: '',
                dishes: []
            }
        }
    }

    componentDidMount(){
        firebasePlaces.child(this.props.placeId).on("value", snap => {
            this.setState({
                Place: snap.val()
            })
        })
    }

    render(){
        return(
            <div>
                <h1 className="name"> {this.state.Place.name} </h1>
                <h3 className="address"> {this.state.Place.address} </h3>
                <DishList dishes={this.state.Place.dishes} />
            </div>
        )
    }
}

this.setState({
    Dishes: []
}, () => {
    this.setState({
        Dishes: updatedTempDishes
    })
})