Question

我有一个React Map，我试图使用循环，但只显示即将到来的日期，而不应显示过去的日期数据。我已经安装了Moment JS，并尝试比较currentDate大于旧日期。但是我得到了一张空的地图。

我在做什么错了？

我的代码：

filterMap.map((value, index) => {
    const concatData = [
        ...(value.opendag_department + ' - '),
        ...(value.opendag_data + ' - '),
        ...value.opendag_link,
    ];

    const date = Moment(value.opendag_data);
    const now = Moment().format('DD/M/YYYY');

    console.log(now, date._i);

    return data.push(
        date > now ? (
            <tr key={index}>
                <td data-th="Datum">{value.opendag_data}</td>
                <td data-th="Opleiding">
                    <strong>{value.opendag_department}</strong>
                </td>
                <td data-th="Link">
                    <a
                        target="_blank"
                        rel="noopener noreferrer"
                        href={value.opendag_link}>
                        bekijk website
                    </a>
                </td>
                <td data-th="Select">
                    <CheckBox
                        thisClassName="data__checkbox checkbox__input"
                        value={concatData.join('')}
                        id={'string_' + index}
                        onChange={checks}
                    />
                </td>
            </tr>
        ) : null
    );
});
return data;

Answer 1

您的日期比较可能不正确。现在您需要使用类似的东西来代替日期>

const date = Moment(value.opendag_data);
// Do not use format method for create 'now date', it's return string insted of moment
const now = Moment();

// Do not use return with push, push is a void method
// I do not understand at all what you need to do in this method, 
// But you need using isAfter for detect if date is after current date 

date.isAfter(now) ? ... : ...

Answer 2

那不是您应该使用Array.prototype.map（）的方式，因为映射会创建一个新的数组。您应该先过滤数组，然后再映射它。

const filteredDate = filterMap.filter(value => {

    const date = Moment(value.opendag_data);
    const now = Moment().format('DD/M/YYYY');

    if (date > now)
       return date
})

return filteredDate.map(value => {

    const concatData = [
        ...(value.opendag_department + ' - '),
        ...(value.opendag_data + ' - '),
        ...value.opendag_link,
    ];

    return <tr key={index}>
             <td data-th="Datum">{value.opendag_data}</td>
             <td data-th="Opleiding">
                <strong>{value.opendag_department}</strong>
             </td>
             <td data-th="Link">
                <a
                  target="_blank"
                  rel="noopener noreferrer"
                  href={value.opendag_link}>
                  bekijk website
                </a>
             </td>
             <td data-th="Select">
               <CheckBox
                 thisClassName="data__checkbox checkbox__input"
                 value={concatData.join('')}
                 id={'string_' + index}
                 onChange={checks}
                />
              </td>
            </tr>
});

让我知道是否有帮助

React＆Moment JS-如何仅映射即将到来的日期？

2 个答案: