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进行选择所需的项目。

通过道具和使用array.map传递数据不起作用

1 个答案: