Mam turecję postów, a wewnątrz niej mam użytkownika, który jest obiektem, a wewnątrz niej, mam naśladowcy, że jest to tablica, którą muszę pętli.

Aby uprościć, co powiedziałem, wygląda tak: Wpisz opis obrazu tutaj

To, co muszę zrobić, to wyświetlić wszystkie posty (prywatne lub publiczne) moich zwolenników.

Więc logika, którą napisałem, jest tutaj:

    const availablePosts = postsArray?.map((post: PostInterface) => {
        const privatePosts = post.userID.followers.filter((follower: string) => {
            if (follower === userID) {
                console.log(post)
                return post
            }
        })
        return privatePosts
    })

postArray Wygląda na obrazku powyżej, userID jest aktualnym identyfikatorem użytkownika - ten, który jest zalogowany.

Jeśli ja console.log(post) jest to wewnątrz oświadczenia, jeśli dostaję cały post, a to jest dokładnie to, czego potrzebuję. Ta konsola wygląda tak:

enter image description here

A są to wszystkie posty użytkowników, które obserwuję.

Ale jeśli konsola log privatePosts lub availablePosts lub availablePosts Otrzymam tylko tablicę identyfikatorów, ale potrzebuję całego postu, więc mogę wyświetlić go w mojej aplikacji. I to wygląda tak: Wprowadź opis obrazu tutaj

0
Marina 2 sierpień 2020, 16:36

1 odpowiedź

Najlepsza odpowiedź

Problem

  • Korzystanie z map ITEREUSE Over Array Elements i spróbuj utworzyć tablicę nowych obiektów. Tutaj zachęcasz na wszystkie posty w {x1}} i mapuj je do tablic obserwujących (wyniki filter).
  • Korzystanie filter Tworzysz tablicę z przedmiotami przechodzącymi do wdrożonego testu. Tutaj testujesz dla follower === userID. Gdy wartości są równe powrót post, ale po prostu "informuje funkcję filtra", aby powrócić prąd follower w nowej tablicy.

W rezultacie otrzymujesz tablicę przewagę obserwujących.

Rozwiązanie

Użyj reduce :

const filtered = postsArray.reduce((acc, post) => {
  if (post.userID.followers && post.userID.followers.some(follower => follower === userId)) {
    acc.push(post);
  }

  return acc;
}, []);

reduce Iterates nad postsArray i sprawdza, czy którykolwiek z obserwatorów po przekazywaniu testu follower === userID. Jeśli test następuje, słupek jest wciśnięty do acc array (acc stoi dla akumulator ).

Pełny przykład:

const { useState } = React;

function App() {
  const [userId, setUserId] = useState(null);

  const filtered = postsArray.reduce((acc, post) => {
    if (post.userID.followers && post.userID.followers.some(follower => follower === userId)) {
      acc.push(post);
    }

    return acc;
  }, []);

  const posts = filtered.map(p => (
    <li key={p.id}>
      {p.visibility} - {p.id}
    </li>
  ));

  return (
    <div className="App">
      <div>
        <label>Follower ID: </label>
        <input onChange={e => setUserId(e.target.value)} />
      </div>
      <div>{posts.length !== 0 ? <ul>{posts}</ul> : <span>No posts</span>}</div>
    </div>
  );
}

const postsArray = [
  {
    id: "post1",
    visibility: "Public",
    userID: {
      followers: ["1", "2", "3"]
    }
  },
  {
    id: "post2",
    visibility: "Private",
    userID: {
      followers: ["1", "2", "4"]
    }
  },
  {
    id: "post3",
    visibility: "Public",
    userID: {
      followers: ["2"]
    }
  },
  {
    id: "post4",
    visibility: "Private",
    userID: {
      followers: []
    }
  },
  {
    id: "post5",
    visibility: "Public",
    userID: {
      followers: null
    }
  },
  {
    id: "post6",
    visibility: "Private",
    userID: {}
  }
];

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
1
macborowy 2 sierpień 2020, 14:47