React DatePicker以默认值加载，但在状态更改时不会更改

Question

我有一个组件，它根据x个电荷数呈现x个DateInputs。应使用从服务器加载的默认值呈现日期输入。一旦触发了onChange，它将更新父级中的状态，并使用computedProperty打印控制台中所选的日期。要提供更多上下文，请参见页面的图像：

A您可以看到，每个费用都会呈现一个日期选择器，用户需要能够修改费用日期。因此，就数据流而言，子组件中的onChange会触发父组件中的方法handleChargesDateChange，因为状态需要存储在父组件中。

此时，下拉列表中会显示默认的充电日期，但当执行onChange时，日期输入值不会更改。但是，该方法会打印所选的正确日期。同样，为了获得更多的上下文信息，这里是当child在日期选择器上执行onChange时存储在parent中的数据的屏幕截图。

如您所见，当用户从每个日期选择器中选择一个时，日期值会被修改。但是，实际的日期选择器值保持不变。我可以让它工作，它为每个日期选择器呈现一个空日期，当用户选择一个新日期时，它将呈现带有所选日期的日期选择器。它还将值存储在父级中。但是我真的很努力渲染去甲脂值，但是当它被改变时，用用户选择的值更新日期选择器...我希望这有意义...不管怎样，这是代码。所以在父级中被触发的方法：

 handleChargesDateChange = (e) => {
    const date = e.target.value;
    const momentDate = moment(date);
    const chargeId = e.target.name;
    console.log(date);
    console.log(momentDate);
    this.setState({
        updatedChargeDates: [
            ...this.state.updatedChargeDates,
            {[chargeId]: date}
        ]
    }, () => console.log(this.state.updatedChargeDates))
}

然后通过以下方式传递（大约3个孩子深）：

  <Grid.Row>
            <Grid.Column width={16}>
                <OrderSummary
                    order={this.state.order}
                    fuelTypes={this.state.fuelTypes}
                    vehicleClasses={this.state.vehicleClasses}
                    deviceTypes={this.state.deviceTypes}
                    chargeTypes={this.state.chargeTypes}
                    featureTypes={this.state.featureTypes}
                    itemGroups={this.state.itemGroups}
                    itemTypes={this.state.itemTypes}
                    updateChargeDates={this.handleChargesDateChange}
                    chargeDates={this.state.updatedChargeDates}
                />
            </Grid.Column>

我将跳过方法传递到的其他各种子组件，直接进入受影响的组件。因此，该方法然后落在Charges：

 export class Charges extends Component {

constructor(props) {
    super(props);

    this.state = {
        currentItem: 0,
        newDate: '',
        fields: {}
    }
}

render() {
 const {charges, chargeTypes, updateChargeDates, chargeDates} = this.props;

 console.log('Props method', charges);
 if (charges.length === 0) { return null; }

return <Form>
    <h3>Charges</h3>
    {charges.map(charge => {

        console.log(charge);
        const chargeType = chargeTypes.find(type => type.code === charge.type) || {};
        return <Grid>
            <Grid.Row columns={2}>
                <Grid.Column>
                    <Form.Input
                        key={charge.id}
                        label={chargeType.description || charge.type}
                        value={Number(charge.amount).toFixed(2)}
                        readOnly
                        width={6} />
                </Grid.Column>
                <Grid.Column>
                    <DateInput
                        name={charge.id}
                        selected={this.state.newDate}
                        ***onChange={updateChargeDates}***
                        ***value={chargeDates[charge.id] == null ? charge.effectiveDate : chargeDates[charge.id]}***
                    />
                </Grid.Column>
            </Grid.Row>
        </Grid>
    })}
    <Divider hidden />
    <br />
</Form>
}

我用***突出显示了罪犯代码，以便于理解。我正在使用三元类型运算符来确定要显示的值，但当我选择一个值时，它似乎不会更新。。我想，根据我的代码，如果初始的chargeDates[charge.id]为空，那么我们将显示费用。effectiveDate就是它所做的，但是一旦我更改了日期，我希望chargeDates[charge.id]会有一个值，该值反过来会显示该值。。。

我真的希望这是有意义的，我相信我错过了这一点，这将是一个简单的修复。。但似乎我是个新手，所以我很困惑。。

我必须遵循以下资源，但它并没有真正满足我的需求：

状态为的多个日期选择器

数据采集器状态

如果您需要更多的问题或澄清，请务必让我知道！

Answer 1

看看你的截图，updatedChargeDates（chargeDatesprop）是一个对象数组。数组有索引0,1和2，但你访问它在DateInput像这样chargeDates[charge.id]你试图获得的数据在索引431780，例如，返回未定义，因此条件chargeDates[charge.id]==null？charge.effectiveDate： chargeDates[charge.id]，将始终返回charge.effectiveDate。

您可以通过将updatedChargeDates设置为对象，在handleChargesDateChange中修复此问题，如下所示：

 handleChargesDateChange = (e) => {
    const date = e.target.value;
    const momentDate = moment(date);
    const chargeId = e.target.name;
    console.log(date);
    console.log(momentDate);
    this.setState({
        updatedChargeDates: {
            ...this.state.updatedChargeDates,
            [chargeId]: date
        }
    }, () => console.log(this.state.updatedChargeDates))
}