在 React js 中对 .map 数据进行排序（在顶部显示最新日期）

Question

我正在尝试根据日期对数据进行排序，其中最新日期必须位于列表顶部

let mapped = predefined.reduce((r, a) => {
   r[a.date] = [...(r[a.date] || []), a];
   return r;
 }, {});

我试过这样映射

mapped 有数据列表，但是当我调用 the item.date 时没有打印任何内容


{Object.values(mapped).map((item, index) => (
                  <tr style={styles.tr}>
                    <td>{item.date}</td>
                    <td>
                      {item.criticality == "high risk" ? (
                        <button
                          //   onClick={() => findgraph(user.id)}
                          style={styles.red}
                        ></button>
                      ) : item.criticality == "stable" ? (
                        <button
                          //   onClick={() => findgraph(user.id)}
                          style={styles.green}
                        ></button>
                      ) : (
                        <button
                          //   onClick={() => findgraph(user.id)}
                          style={styles.yellow}
                        ></button>
                      )}
                    </td>
                    <td>
                      <button>view</button>
                    </td>
                  </tr>
                ))}

带数据的代码沙箱

Answer 1

DD-MM-YYYY 格式未被 new Date() 识别并返回 Invalid Date 因为它检查 DD 一个月的位置并且当 DD 更大时超过 12 就失败了。不得不使用一个简单的 util 函数来进行字符串到日期的转换。

像下面这样尝试。

Util 函数正确转换日期。

  const getDateObjectFromString = (dateString) => {
    const [day, month, year] = dateString.split("-");
    return new Date(year, month - 1, day, 0, 0, 0, 0);
  };

在您的 useEffect 中加载数据，执行 sort 并设置值。

const predefinedData = res.data;

predefinedData.sort(({ date: firstDate }, { date: secondDate }) => {
  return (
    getDateObjectFromString(secondDate) -
    getDateObjectFromString(firstDate)
  );
});

setpredefined(predefinedData);

在 React js 中对 .map 数据进行排序（在顶部显示最新日期）

sort .map data in react js (show latest date on top)

multithreading

reactjs

react-native