Poniższy fragment w moim kodziebase zwraca map tablicy i zastanawiam się, jak mogę przekazać filtr dla e.g status = 2, dzięki czemu otrzymam tylko filtrowane wyjście. Jeśli mam filter tablicę, a następnie użyj map lub po prostu filtrować dane bez mapowania.

Może być czysta metoda JS lub Lodash

P.S Mam nadzieję, że wydrukuje ostateczną wyjście wewnątrz oświadczenia return, jak wspomniano w fragmence.

const data = {
  "edges": [{
      "node": {
        "id": 20,
        "status": 1,
        "info": "Order info 20"
      }
    },
    {
      "node": {
        "id": 19,
        "status": 1,
        "info": "Order info 19"
      }
    },
    {
      "node": {
        "id": 18,
        "status": 2,
        "info": "Order info 18"
      }
    },
    {
      "node": {
        "id": 17,
        "status": 3,
        "info": "Order info 17"
      }
    },
    {
      "node": {
        "id": 16,
        "status": 2,
        "info": "Order info 16"
      }
    },
    {
      "node": {
        "id": 15,
        "status": 2,
        "info": "Order info 15"
      }
    },
    {
      "node": {
        "id": 14,
        "status": 1,
        "info": "Order info 14"
      }
    },
    {
      "node": {
        "id": 13,
        "status": 2,
        "info": "Order info 13"
      }
    },
    {
      "node": {
        "id": 12,
        "status": 1,
        "info": "Order info 12"
      }
    },
    {
      "node": {
        "id": 11,
        "status": 1,
        "info": "Order info 11"
      }
    },
    {
      "node": {
        "id": 10,
        "status": 1,
        "info": "Order info 10"
      }
    },
    {
      "node": {
        "id": 9,
        "status": 1,
        "info": "Order info 9"
      }
    },
    {
      "node": {
        "id": 8,
        "status": 1,
        "info": "Order info 4"
      }
    },
    {
      "node": {
        "id": 7,
        "status": 1,
        "info": "Order info 8"
      }
    },
    {
      "node": {
        "id": 6,
        "status": 1,
        "info": "Order info 7"
      }
    },
    {
      "node": {
        "id": 5,
        "status": 1,
        "info": "Order info 6"
      }
    },
    {
      "node": {
        "id": 4,
        "status": 1,
        "info": "Order info 5"
      }
    },
    {
      "node": {
        "id": 3,
        "status": 1,
        "info": "Order info 3"
      }
    },
    {
      "node": {
        "id": 2,
        "status": 1,
        "info": "Order info 2"
      }
    },
    {
      "node": {
        "id": 1,
        "status": 1,
        "info": "Order info 1"
      }
    }
  ]
};

const myFunction = () => {
  return data.edges.map(({
    node: {
      id,
      status,
      info
    }
  }) => {
    return(
      <span>{id}</span>
      <span>{status}</span>
      <span>{info}</span>
    );
  });
};
0
zaq 27 czerwiec 2017, 20:02

3 odpowiedzi

Najlepsza odpowiedź

Jeśli chcesz filtrować i mapować w tej samej operacji (tj. Bez iteracji przez dane dwa razy), musisz użyć reduce:

const myFunction = () => {
  return data.edges.reduce((result, {
    node: {
      id,
      status,
      info
    }
  }) => {
    if (status === 2) {
      return result.concat(<div><span>{id}</span><span>{status}</span><span>{info}</span></div>);
    }
    return result;
  }, []);
};

Należy pamiętać, że <span>{id}</span><span>{status}</span><span>{info}</span>, za swój komentarz, nie jest poprawny JSX (co by to było transpii?). Aby sprawić, że jest ważny, owinięłem go w <div> powyżej. Alternatywnie możesz przekazać trzy argumenty do concat, ale wtedy musisz się upewnić każdy

result.concat(<span>{id}</span>, <span>{status}</span>, <span>{info}</span>);

Należy również pamiętać, że jeśli używasz reakcji, Elementy w tablicy zwykle potrzebuje key.

Tutaj jest w fragmencie:

const data = {
  "edges": [
    { "node": { "id": 20, "status": 1, "info": "Order info 20" } },
    { "node": { "id": 19, "status": 1, "info": "Order info 19" } },
    { "node": { "id": 18, "status": 2, "info": "Order info 18" } },
    { "node": { "id": 17, "status": 3, "info": "Order info 17" } },
    { "node": { "id": 16, "status": 2, "info": "Order info 16" } },
    { "node": { "id": 15, "status": 2, "info": "Order info 15" } },
    { "node": { "id": 14, "status": 1, "info": "Order info 14" } },
    { "node": { "id": 13, "status": 2, "info": "Order info 13" } },
    { "node": { "id": 12, "status": 1, "info": "Order info 12" } },
    { "node": { "id": 11, "status": 1, "info": "Order info 11" } },
    { "node": { "id": 10, "status": 1, "info": "Order info 10" } },
    { "node": { "id": 9, "status": 1, "info": "Order info 9" } },
    { "node": { "id": 8, "status": 1, "info": "Order info 4" } },
    { "node": { "id": 7, "status": 1, "info": "Order info 8" } },
    { "node": { "id": 6, "status": 1, "info": "Order info 7" } },
    { "node": { "id": 5, "status": 1, "info": "Order info 6" } },
    { "node": { "id": 4, "status": 1, "info": "Order info 5" } },
    { "node": { "id": 3, "status": 1, "info": "Order info 3" } },
    { "node": { "id": 2, "status": 1, "info": "Order info 2" } },
    { "node": { "id": 1, "status": 1, "info": "Order info 1" } }
  ]
}

const myFunction = () => data.edges.reduce(
  (result, { node: { id, status, info } }) => {
    if (status === 2) {
      return result.concat(<div><span>{id}</span><span>{status}</span><span>{info}</span></div>);
    }
    return result;
  }, []
);

console.log(myFunction());
.as-console-wrapper{min-height:100%}
1
Jordan Running 27 czerwiec 2017, 18:07
twoEdges = edges.filter((thingy) => { return (thingy.node.status === 2);}); 

Lub twoEdges = edges.filter((thingy) => thingy.node.status === 2 ); ... lub coś takiego

0
jumpdart 27 czerwiec 2017, 17:10

Możesz po prostu filtrować tablicę i mapować sznurek z literalem szablonu.

var data = { edges: [{ node: { id: 20, status: 1, info: "Order info 20" } }, { node: { id: 19, status: 1, info: "Order info 19" } }, { node: { id: 18, status: 2, info: "Order info 18" } }, { node: { id: 17, status: 3, info: "Order info 17" } }, { node: { id: 16, status: 2, info: "Order info 16" } }, { node: { id: 15, status: 2, info: "Order info 15" } }, { node: { id: 14, status: 1, info: "Order info 14" } }, { node: { id: 13, status: 2, info: "Order info 13" } }, { node: { id: 12, status: 1, info: "Order info 12" } }, { node: { id: 11, status: 1, info: "Order info 11" } }, { node: { id: 10, status: 1, info: "Order info 10" } }, { node: { id: 9, status: 1, info: "Order info 9" } }, { node: { id: 8, status: 1, info: "Order info 4" } }, { node: { id: 7, status: 1, info: "Order info 8" } }, { node: { id: 6, status: 1, info: "Order info 7" } }, { node: { id: 5, status: 1, info: "Order info 6" } }, { node: { id: 4, status: 1, info: "Order info 5" } }, { node: { id: 3, status: 1, info: "Order info 3" } }, { node: { id: 2, status: 1, info: "Order info 2" } }, { node: { id: 1, status: 1, info: "Order info 1" } }] },
    myFunction = _ => data.edges.
        filter(a => a.node.status === 2).
        map(({ node: { id, status, info } }) => `<div><span>${id}</span> <span>${status}</span> <span>${info}</span></div>`);

console.log(myFunction());
.as-console-wrapper { max-height: 100% !important; top: 0; }
2
Nina Scholz 27 czerwiec 2017, 17:40