ReactJS / JavaScript-在进行选择时从日期字段数组中查找最新日期

Question

我在reactJS中有一个表，其中包含以下字段的项目数组

id ， requested_date和location

而且我还有一个字段，即日期字段。 因此，在项目数组中，我可能有一个或多个项目，它们的requested_date不同。

但在该日期字段（这是阵列外）应具有最新的日期出来的阵列的requested_date 。

结构如下

项目数组

id requested_date location 101 2018-03-21 NY 102 2018-03-22 NY 103 2018-03-20 NY

Date : 2018-03-22

在上述结构中Date : 2018-03-22因为2018-03-22是items数组中的最新requested_date 。

请在下面找到我的代码。

class Details extends React.Component {
    constructor(props) {
    super(props);
    this.requestedDateChangeonSelectionEvent=this.requestedDateChangeonSelectionEvent.bind(this);
    this.state = { item: props.item };

}
requestedDateChangeonSelectionEvent(dateSelected)
{

    var item = this.state.item;
    var lines = item.order_items;
    if(lines.length == 1)
        {
            var latest = dateSelected; 
            console.log("Length 1");

        }

    else {
        var latest = dateSelected; 
     for(var i=0;i<lines.length;i++) {
         if(moment(lines[i].requested_date) >= moment(latest)) {
             latest=lines[i].requested_ship_date;
             }
         }

    }
       this.state.item.date=latest;
        this.setState({ item: item });

}

render() {
   return (<tbody>{ this.props.items.map((item) => <DetailsItem key={ item.line_id } item={ item } 
                                                        requestedDateChangeonSelectionEvent={ this.props.requestedDateChangeonSelectionEvent }
                                                     />) }

              </tbody>);    
      }
}

class DetailsItem extends React.Component {
constructor(props) {
    super(props);
    this.handleRequestedShipDate = this.handleRequestedShipDate.bind(this);
}

handleRequestedShipDate(e)
{

    var item=this.state.item;
    this.setState({item:item});
    var charCode = (e.which) ? e.which : e.keyCode;
    var dateSelected=e.target.value;
    e.preventDefault();
    this.props.requestedDateChangeonSelectionEvent(dateSelected);

}
render() {


    return (
            <tr>
            <td><input name="line_number" type="text" value={ this.state.item.line_number } onChange={ his.handleInputChange }/> </td>
            <td><input name="requested_date"  type="date" value={ this.state.item.requested_date } onChange={ (e) => { this.handleRequestedShipDate(e); this.handleInputChange(e); } }  </td>
            <td><input name="source_location" type="text" value={ this.state.item.source_location } onChange={ this.handleInputChange }/> </td>
            </tr>   
             );
    }
}

我正在尝试类似的逻辑。在选择requested_date本身时，它应该找到最新的日期并在Date字段中进行更新。

当我为第一个项目选择request_date ，它的效果很好，但是当我为第二个和第三个项目选择时，它找不到当前选择的request_date,而是我先前的选择。

问题详细：

日期比较没有问题。 它的发生符合预期。 问题是，如果我在数组中间或某些地方更改任何日期值，则它会保持先前的值并与旧值本身进行比较。 数据选择本身不会发生更改。 例如。，

id requested_date location 101 2018-03-21 NY 102 2018-03-22 NY 103 2018-03-20 NY

现在，如果我在102记录中做任何更改，例如。

id requested_date location 101 2018-03-21 NY 102 2018-03-19 NY 103 2018-03-20 NY

我期望选择过程本身会发生2018-03-19更改，并且应该与其他2018-03--21比较，并将最新日期更改为2018-03--21 。

但是，它没有发生，而是保持旧值2018-03-22在日期选择期间该值对于该数组元素没有更改。

Answer 1

我认为这是重复的： Moment js日期时间比较 。

尝试使用momentjs的diff函数。

当您尝试比较两个矩对象时，JavaScript只会比较它们的引用，而不是它们的实际值（JavaScript不知道如何使用>=来比较日期）。 因此，使用diff函数返回日期之间的实际差额（将是整数，JavaScript知道如何比较整数！）