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

Question

我有一个组件，它根据 x 次收费呈现 x 数量的 DateInputs。日期输入应使用从服务器加载的默认值呈现。一旦onChange 被触发，它就会更新父级中的状态并使用computedProperty 打印出带有所选日期的控制台。为了提供更多上下文，这里是页面的图像：

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

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

如您所见，当用户从每个日期选择器中选择一个时，日期值会被修改。但是，实际的 datepicker 值保持不变。我可以让它工作，它为每个日期选择器呈现一个空日期，当用户选择一个新日期时，它会用所选日期呈现日期选择器。它还将值存储在父级中。但是我真的很难呈现默认值，但是当它改变时，用用户选择的值更新日期选择器......我希望这是有道理的......无论如何这里是代码。所以在父级中触发的方法：

 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] 为空，那么我们显示 @987654340 @ 这就是它正在做的事情，但是一旦我更改日期，我就会期望 chargeDates[charge.id] 有一个值，而该值又应该显示该值...

我真的希望这是有道理的，我确定我在这里错过了这一点，这将是一个简单的修复..但我似乎是一个新手，我很困惑..

我很乐意关注以下资源，但它并没有真正给我想要的：

Multiple DatePickers in State

Daepicker state

如果您需要更多问题或说明，请告诉我！

Answer 1

看看你的截图，updatedChargeDates (chargeDates prop) 是一个对象数组。该数组具有索引 0、1 和 2，但您在 DateInput 中访问它，例如 chargeDates[charge.id] 您试图在索引 431780 处获取数据，它返回 undefined，因此条件为 chargeDates[charge.id] == null ? charge.effectiveDate : chargeDates[charge.id] , 将始终返回 charge.effectiveDate。

您可以在handleChargesDateChange 中通过将updatedChargeDates 设为对象来解决此问题，如下所示：

 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))
}