bounty将在4天后过期。回答此问题可获得+50的声誉奖励。Adam Norton正在寻找来自声誉良好来源的答案：没有人接电话。但我不知道如何简化这个问题来说明正在发生的事情。

我已经为我的公司创建了一个计费计算器。我们可以选择不同的费率类型，“盈利”，“非盈利”和“现有”的特殊客户。
设置好费率类型后，我们选择一名员工，然后它将费率表中的值拉出来，插入并根据该员工的计费费率、公司成本和我们为该项目插入的小时数进行计算，计算出我们将收取的费用和利润。
除了更改项目的费率类型外，所有工作都按预期进行，状态实际上更新为正确的类型，然后我可以选择费率，显示的数字也是正确的。但是，如果我已经设置了员工，并且显示了他们的费率......这些需要在费率更改时根据新的费率表动态更改。
这应该发生在一个组件上，该组件是设置费率类型的组件的孙子，但正如我所说的，属性值确实存在，它只是没有动态更新，或者在更改时重新呈现。

import React, { Component } from 'react';
import {Form} from 'react-bootstrap';
import styled from 'styled-components';
import { config } from '../../Config/Constants';
import debounce from 'lodash.debounce';

const API_URL = config.url.API_URL;

const Div = styled.div`
    color: black;
`

class Breakdown extends Component {
    constructor(props) {
        super(props);

        this.state = {
            employee_type: "Choose",
            employee_name: "Choose",
            rate: 0,
            cost: 0,
            hours1: 0,
            hours2: 0,
            hours3: 0,
            total_hours: 0,
            total_costs: 0,
            total_bill: 0,
            margin: 0,

            // Cost Chart
            employeeTable: [
                { name: "Choose", cost: 0, type:"Choose"},
                { name: "Adam N", cost: 95.53, type: "Executive" },
                { name: "Amber H", cost: 50.33, type: "Senior" },
                { name: "Denise M", cost: 28.34, type: "Coordinator" }
            ],

            // Rate Charts
            rateChartNonProfit: [
                { type: "Choose", rate: 0 },
                { type: "Executive", rate: 300 },
                { type: "Senior", rate: 250 },
                { type: "Mid-Level", rate: 200 },
                { type: "Associate", rate: 150 },
                { type: "Coordinator", rate: 150 }
            ], 
            rateChartForProfit: [
                { type: "Choose", rate: 0 },
                { type: "Executive", rate: 400 },
                { type: "Senior", rate: 275 },
                { type: "Mid-Level", rate: 225 },
                { type: "Associate", rate: 175 },
                { type: "Coordinator", rate: 175 }
            ], 
            rateChartExisting: [
                { type: "Choose", rate: 0 },
                { type: "Executive", rate: 400 },
                { type: "Senior", rate: 275 },
                { type: "Mid-Level", rate: 225 },
                { type: "Associate", rate: 175 },
                { type: "Coordinator", rate: 175 }
            ]

            
        }
        

    }

    componentDidMount() {
        this.getBreakdownData(this.props.breakdownId);
    }

    getBreakdownData(breakdownId) {
        fetch(API_URL + `/billingcalculator/${breakdownId}`)
            .then((res) => {
                if (!res.ok) {
                    throw new Error()
                }
                return res.json()
            })
            .then((result) => {
                this.setState({ ...result[0], });
            })
            .catch((error) => {
                console.log(error);
            })
            .then(this.updateRate());
    }

    selectType = (e) => {
        this.setState({ employee_type: e.target.value },
        () => this.updateRate()
        )
    }

    updateRate() {
        let rateType = this.props.rateType;
        if (rateType === "non-profit") {
            const index = this.state.rateChartNonProfit.findIndex(type => type.type === this.state.employee_type);
            this.setState({ rate: this.state.rateChartNonProfit[index].rate },
            () => this.updateTotals());
        } else if (rateType === "existing") {
            const index = this.state.rateChartExisting.findIndex(type => type.type === this.state.employee_type);
            this.setState({ rate: this.state.rateChartExisting[index].rate },
            () => this.updateTotals());
        } else {
            const index = this.state.rateChartForProfit.findIndex(type => type.type === this.state.employee_type);
            this.setState({ rate: this.state.rateChartForProfit[index].rate },
            () => this.updateTotals());
        } 
    }

    

    render() {
        return (
        

            <tr key={this.props.breakdownId}>
                <td>
                    <select name="employee_type" value={this.state.employee_type} onChange={this.selectType}>
                        <option value="Choose">Choose</option>
                        <option value="Executive">Executive</option>
                        <option value="Senior">Senior</option>
                        <option value="Mid-Level">Mid-Level</option>
                        <option value="Associate">Associate</option>
                        <option value="Coordinator">Coordinator</option>
                    </select>
                </td>
                <td>
                    <select name="employee_name" value={this.state.employee_name} onChange={this.selectEmployee}>
                        <option value="Choose">Choose</option>
                        <option value="Adam N">Adam N</option>
                        <option value="Amber H">AmberH</option>
                        <option value="Denise M">Denise M</option>
                    </select>
                </td>
                <td>
                    {this.state.rate}
                </td>
                <td>
                    {this.state.cost}
                </td>
                <td>
                    <Form.Control
                        size="sm"
                        type="text"
                        value={this.state.hours1}
                        onChange={this.handleChange}
                        name="hours1"
                    />
                </td>
                <td>
                    <Form.Control
                        size="sm"
                        type="text"
                        value={this.state.hours2}
                        onChange={this.handleChange}
                        name="hours2"
                    />
                </td>
                <td>
                    <Form.Control
                        size="sm"
                        type="text"
                        value={this.state.hours3}
                        onChange={this.handleChange}
                        name="hours3"
                    />
                </td>
                
                <td>
                    {this.state.total_hours}
                </td>
            </tr>        
        )
    }
}

export default Breakdown;