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

我有一个组件，它根据x个电荷数呈现x个DateInputs。应使用从服务器加载的默认值呈现日期输入。一旦触发了

onChange

，它将更新父级中的状态，并使用

computedProperty

打印控制台中所选的日期。要提供更多上下文，请参见页面的图像：

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

handleChargesDateChange

，因为状态需要存储在父组件中

此时，下拉列表中会显示默认的充电日期，但当执行

onChange

时，日期输入值不会更改。但是，该方法会打印所选的正确日期。同样，为了获得更多的上下文信息，这里是当child在日期选择器上执行

onChange

时存储在

parent

中的数据的屏幕截图

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

 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个孩子深）：

我用

***

突出显示了罪犯代码，以便于理解。我正在使用三元类型运算符来确定要显示的值，但当我选择一个值时，它似乎不会更新。。我认为，从我的代码来看，如果初始的

chargeDates[charge.id]

为空，那么我们将显示

charge.effectiveDate

，这就是它所做的，但一旦我更改日期，我希望

chargeDates[charge.id]

会有一个值，而这个值反过来应该会显示该值

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

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

---

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

查看您的屏幕截图，

updatedChargeDates

（

chargeDates

prop）是一个对象数组。数组有索引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))
}

---

如何构建代码沙盒或stackblitz与演示的问题？当问题被简化时，尽可能简单的帮助就容易多了。你用过codesandbox吗？很难从这里调试。请提供一个可共享的链接，我们可以在其中查看和查找问题？您使用哪个库进行

DateInput

？他们可能有不同的API，例如，需要您使用

const date=e.value

而不是

e.target.value

非常感谢，您不知道我花了多少时间看这个！！我就知道这会是一件小事：（谢谢！

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

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