Question

我正在使用react-redux-firebase创建任务管理器。创建任务后，用户填写表单，此数据用于将文档添加到Firebase的todo集合中。因此，每个待办事项都有一个文档。然后，另一个组件将待办事项集合中的每个文档映射到一张卡片，以便用户可以看到每个待办事项

问题在我们创建任务时出现，它在我们的待办事项部分下显示重复的任务。但是，只有一个新文档被添加到了Firebase的todo集合中。另外，刷新页面后，重复的任务也会消失。我对为什么即使在Firebase中仅创建一个新文档仍显示重复的任务感到困惑。是什么导致重复项开始？任何帮助将不胜感激！

希望这两张图片可以帮助您更好地理解问题，因为我发现很难解释。

重复示例：

当我刷新页面时，重复项消失了：

这是将表单提交到firebase的函数：

handleCreateSubmit = e => {
e.preventDefault();
const { firestore } = this.props;
this.props.users.forEach(user => {
  if (user.uid === this.props.auth.uid) {
    const dueDate = new Date(this.state.due + " " + this.state.eta);
    const newTask = {
      title: this.state.title,
      description: this.state.description,
      due: dueDate,
      createdBy: user.name,
      status: "todo",
      department: this.state.departmentName
    };

    firestore
      .add({ collection: "todo" }, newTask)
      .then(() => console.log("task added"))
      .catch(() => {
        console.log("error");
      });
    this.setState({
      title: "",
      description: "",
      due: "",
      eta: ""
    });
    this.addCreateNotification(user.name);
   } else if (!user.uid === this.props.auth.uid) {
    return null;
  }
  });
  this.handleCreateClose();
 };

这是将每个文档映射到卡片的功能：

ren = () => {
if (this.props.todo) {
  return (
    <React.Fragment>
      {this.props.todo.map((item, i) => {
        if (item.department === this.props.match.params.id) {
          return (
            <div key={i}>
              <div className="card" style={{ backgroundColor: "#d71636" 
  }}>
                <div className="card-content white-text">
                  <span className="card-title">
                    {item.title}{" "}
                    <Start
                      id={item.id}
                      className="start"
                      style={{ float: "right" }}
                      onClick={e => {
                        this.handleClickOpen(e);
                      }}
                    />
                    <Delete
                      id={item.id}
                      className="start"
                      style={{ float: "right" }}
                      onClick={e => {
                        this.delete(e);
                      }}
                    />
                  </span>
                  <p>
                    <b>Created By: </b>
                    {item.createdBy}
                  </p>
                  <p>
                    <b>Due:</b> {moment(item.due.toDate()).calendar()}
                  </p>
                  <p>
                    <b>Description: </b>
                    {item.description}
                  </p>
                </div>
              </div>
            </div>
          );
        }
      })}
    </React.Fragment>
  );
} else {
  return <Loading />;
}
};

即使仅将一个文档添加到Firebase，

0 个答案: