Передача данных через реквизит и использование array.map не работает

Question

В настоящее время я создаю приложение и использую firebase для хранения данных, и у меня возникла проблема с распространением одних и тех же данных на два разных компонента (например, AllProjects и SelectedProject) после входа пользователя в систему.

В первом компоненте (AllProjects) он работает и может отображать массив данных и создавать карты, которые я хочу использовать для перехода ко второму компоненту (SelectedProject). Но когда я снова сопоставляю тот же массив данных, чтобы распространить его содержимое на компонент SelectedProject (для каждого отдельного проекта), карта не работает, и только данные из первого проекта в массиве передаются каждому другому проекту.

function UserPanel(props) {
  const [projects, setProjects] = useState([]);
  //get data from firebase
  useEffect(() => {
    return db
      .collection("users")
      .doc(`${props.user.uid}`)
      .collection("projects")
      .onSnapshot(snapshot => {
        const docs = [];
        snapshot.forEach(doc => {
          docs.push({
            ...doc.data()
          });
        });
        setProjects(docs);
      });
  }, [props.user.uid]);

  return (
    <div>
      <Nav user={props.user} />
      <Router>
        <AllProjects projects={projects} path="/" />

          {projects.map(project => (
          <SelectedProject
            project={project}
            path="projects/:projectId"
            key={project.id}
          />
        ))}

      </Router>
    </div>
  );
}

export default UserPanel;

Первый компонент

function AllProjects(props) {
  return  (
    <div>
      {props.projects.map(projects=> (
        <Link key={projects.id} to={`/projects/${projects.id}`}>
          <ProjectCard projects={projects} />
        </Link>
      ))}
    </div>
  );
}

Answer 1

Я не смог найти решение для динамического распространения всех данных через приложение (даже не уверен сейчас, если это возможно?), А вместо этого сделал второй вызов API изнутри второго компонента и использовал id из пути маршрутизатора, чтобы выбратьжелаемый проект.