Reactjs和Firebase - 在db中向用户添加对象并为该对象生成唯一的URL

Question

我希望能够单击“new”按钮，然后调用我的db.js文件中的函数（类似于我创建新用户的方式），创建一个新的EventPage。

每个用户都有自己创建的EventPages列表，在EventPage中应该有Name，EventCode等属性。

我想以某种方式然后让任何人转到URL.com/Events/EventCode19xiu并显示由某个用户生成的EventCode19xiu页面。

那么1.如何在用户下的数据库中创建事件列表。

2.如何创建可通过其自己的唯一URL访问的页面的事件？

我对firebase真的很陌生并做出反应，如果你能指出我的方向很好（特别是做同样事情的教程）！

---

这是我的db.js文件（我已经使用firebase身份验证/用户进行了所有设置）：

import { db } from './firebase';

// User API

export const doCreateUser = (id, username, email) =>
  db.ref(`users/${id}`).set({
    username,
    email,
  });

export const onceGetUsers = () =>
  db.ref('users').once('value');

Answer 1

您正试图保存到DB是这样的状态。

User 1: {
    username: 'User1',
    email: '[email protected]',
    events:[
            eventPage1: {
            Name: 'Event1',
            EventCode: '001'
            },
            eventPage2: {
            Name: 'Event2',
            EventCode: '002'
            }
    ]
}
User 2: {
    username:'User2',
    email:'[email protected]',
    events:[
            eventPage1: {
            Name: 'Event1',
            EventCode: '003'
            }
    ]
}

在这种情况下，你应该像这样构建你的用户对象并将其保存到firebase，稍后你可以获取它。

来到唯一的URL部分，我从唯一的URL可以理解你正在尝试做一些像URL.com/Events/EventCode19xiu，你可以使用React-Router做到这一点

在React-Router中，您可以使用LINK来实现此目的。

<Link 
  key={id} 
  to={{
    pathname: this.props.match.url + '/' + foo,
    search: '?EventCode=' + eventCode
  }} />

稍后可以通过这样的新URLSearchParams（）访问搜索参数

componentDidMount() {
    const query = new URLSearchParams(this.props.location.search);
    for (let param of query.entries()) {
        console.log(param);
    }
}

当然React-Router还有其他方法可以做同样的事情，请检查React-Router

希望这可以帮助 ！