javascript - React DatePicker 加载默认值，但当状态改变时不会改变

Question

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

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

此时，下拉列表中呈现默认的充电日期，但是当执行 onChange 时，日期输入值不会更改。但是，该方法会打印出所选的正确日期。同样，为了了解更多上下文，这里是当子级在日期选择器上执行 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] 为 null 然后我们显示 charge. effectiveDate 这就是它正在做的事情，但是一旦我更改日期，我就会期望 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.effectDate :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))
}