OnClick сразу же запускается при монтировании компонентов с помощью firestore и React, redux

Question

У меня есть компонент, который отображает проект. Для каждого проекта есть кнопка удаления, но по какой-то причине кнопки удаления всех моих проектов сразу «нажимаются». Почему это случилось? Я использую Redux и FireStore. Я думаю, что это, возможно, как-то связано со слушателем в реальном времени, но не имеет проблем с добавлением данных в базу данных.

Проекты. js

  componentDidMount = () => {
    this.props.projectActions.registerProjectListener();
  };

  renderProjects = () => {
    const { projects } = this.props.projects;
    const { classes, projectActions } = this.props;
    return (
      <Paper elevation={0} square={true} className={classes.projectPaper}>
        <Box fontSize="h5.fontSize" textAlign="center">
          Your Projects:
        </Box>
        {projects &&
          projects.map(project => {
            return <Project {...{ key: project.id, project, projectActions }}></Project>;
          })}
        <Grid container className={classes.grid} direction="row" justify="flex-end" alignItems="center">
          <AddProject {...{ projectActions }}></AddProject>
        </Grid>
      </Paper>
    );
  };

Проект. js

export class Project extends Component {
  render() {
    const { classes, project, projectActions } = this.props;
    console.log(project.id);
    return (
      <Paper elevation={3} variant="outlined" className={classes.paper}>
        <Grid container justify="space-between">
          <Box fontSize="h6.fontSize">{project.name}</Box>
          <IconButton onClick={projectActions.deleteProject(project.id)}> //This gets fired immediately for every project
            <ClearIcon></ClearIcon>
          </IconButton>
        </Grid>
      </Paper>
    );
  }
}

действия

export const deleteProject = id => {
  return dispatch => {
    console.log(db.collection("projects").doc(id));
    // db.collection("projects")
    //   .doc(id)
    //   .delete();
    dispatch({ type: ActionTypes.DELETE_PROJECT });
  };
};

export const registerProjectListener = () => {
  let projects = [];
  return dispatch => {
    db.collection("projects").onSnapshot(snapshot => {
      snapshot.docChanges().forEach(change => {
        if (change.type === "added") {
          console.log(change.doc.data());
          projects.push({ ...change.doc.data(), ...{ id: change.doc.id } });
        } else if (change.type === "removed") {
          // projects.filter(()=> )
        }
      });
      dispatch({ type: ActionTypes.REGISTER_LISTENER, projects: projects });
    });
  };
};

Answer 1

Вам необходимо передать ссылку на функцию. Обновите компонент IconButton следующим образом.

<IconButton 
    onClick={() => projectActions.deleteProject(project.id)}>
    <ClearIcon></ClearIcon>
</IconButton>