反应中的过滤和数组映射问题

Question

这是对原始问题的翻译，抱歉是英文

我正在为我正在处理的应用程序的通知创建一个过滤器，该应用程序正在做出反应，事情是这样的，我正在尝试使用过滤器和地图，但出于某种原因，我认为这可能是我的一些语法错误，它没有执行过滤部分，在我收到的数据中有一个名为状态的值，如果完成我希望它从新数组中删除。

状态位于notifications.data.status下面我把接收数据的方式放上

notifications.data

它只做映射，我必须使用Object.keys，因为其余的它给我一个编译错误，非常感谢

          <GlobalNotifications id="GlobalNotifications">
            {/* {console.log(Object.keys(notifications.data).filter(notification => notification.status !== 'completed'))} */}
            {console.log(Object.values(notifications.data))}
            {Object.keys(notifications.data)
              .filter(notification => notification.status !== 'completed')
              .map(key => (
                <NotificationItem
                  id={key}
                  key={key}
                  data={notifications.data[key]}
                  openHistory={openHistory === key}
                  callbackOpenHistory={onOpenHistory}
                />
              ))}
          </GlobalNotifications>

Answer 1

我建议删除 rxjs 标签，因为你的问题与 JavaScript 数组上的高阶函数有关，但与 rxjs

无关

Answer 2

你的 notifications.data 已经是一个数组，所以你不需要使用 Object.keys() 来 return 一个数组。

filteredArray = data
  .filter((notification) => notification.status === "accepted")

然后根据每个项目映射 returned 过滤数组（我使用 'accepted' 因为它提供了更多可玩的元素）。 .map((item) => { 你代码的括号和 return（确保 return 你的 jsx 在这些括号内）})

做列表的时候最好用一个唯一的key，所以我选择用你的item._id做key。下面的示例数据和代码后跟输出

    import "./styles.css";
    let data = [
      {
        status: "completed",
        events: [],
        _id: 1
      },
      {
        status: "accepted",
        events: [],
        _id: 2
      },
      {
        status: "accepted",
        events: [],
        _id: 3
      },
      {
        status: "accepted",
        events: [],
        _id: 4
      },
      {
        status: "accepted",
        events: [],
        _id: 5
      },
      {
        status: "accepted",
        events: [],
        _id: 6
      },
      {
        status: "accepted",
        events: [],
        _id: 7
      },
      {
        status: "accepted",
        events: [],
        _id: 8
      },
      {
        status: "accepted",
        events: [],
        _id: 9
      },
      {
        status: "accepted",
        events: [],
        _id: 10
      }
    ];
    const filteredArray = data
      .filter((notification) => notification.status === "accepted")
      .map((item) => {
        let key = item._id;
        return (
          <div key={key}>
            id: {key}; status: {item.status}
          </div>
        );
      });

输出：

编号：2；状态：已接受

编号：3；状态：已接受

编号：4；状态：已接受

编号：5；状态：已接受

编号：6；状态：已接受

编号：7；状态：已接受

编号：8；状态：已接受

编号：9；状态：已接受

编号：10；状态：已接受

反应中的过滤和数组映射问题

Filtering and array mapping issue in react

arrays

filter

rxjs

reactjs