reactjs - 即使只有一个文档被添加到 firebase，也会显示重复的任务

Question

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

当我们创建任务时，问题就出现了，它在我们的待办事项部分下显示了一个重复的任务。然而，只有一个新文档被添加到我们在 firebase 中的待办事项集合中。此外，一旦我刷新页面，重复的任务就会消失。即使在 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 />;
}
};

标签： reactjsreact-reduxreact-redux-firebase