Блог

Для приведенной ниже строки кода, как я могу отправить notificationsStateUpdate без onClick ? Я хочу, чтобы это действие было отправлено, если notificationClicked оно верно, поэтому в настоящее время у меня настроено троичное выражение.

Однако, похоже, я не могу заставить синтаксис работать. Возможна ли отправка в этом сценарии?

 {notificationClicked ?  lt;NotificationList   notifications={newNotifications} /gt;   dispatch(notificationsStateUpdate({newNotifications}))  : null}  

Полный код для контекста

 import React, { useState, useEffect, useRef } from 'react'; import { useSelector, useDispatch, connect } from 'react-redux'; import _ from 'lodash'; import {makeStyles, useTheme} from '@material-ui/core/styles'; import usePrevious from '../hooks/usePrevious'; import NotificationList from './NotificationList'; import { notificationsStateUpdate } from '../actions';  export default function Notifications(props) {  const [newNotifications, setNewNotifications] = useState([]);  const users = useSelector(state =gt; state.users);  const notificationClicked = useSelector(state =gt; state.notificationClicked)  const prevUsers = usePrevious(users);  const dispatch = useDispatch();  console.log('inside', users);   const isEqual = _.isEqual(prevUsers, users);  const timestamp = !isEqual ? new Date().getTime() : new Date("1991-09-24").getTime();   useEffect(() =gt; {  const notifications = [];  console.log('users', users);  users.forEach((user) =gt; {  if (user.uid === props.uid amp;amp; user.posts) {   user.posts.forEach((postContent) =gt; {  const likes = postContent.like ? Object.values(postContent.like) : null  const comments = postContent.comments_text ? Object.values(postContent.comments_text) : null   if (likes){  let filtererdLikes = likes.filter(post =gt; {  return post.like_notification === false  })  notifications.push(filtererdLikes)  }   if (comments){  let letfilteredComments = comments.filter(post =gt; {  return post.comment_notification === false  })  notifications.push(letfilteredComments)  }   })  }  });  const notificationsDataClean = notifications.flat(Infinity)  setNewNotifications(notificationsDataClean);  }, [timestamp]);   const useStyles = makeStyles((theme) =gt; ({  body: {  margin: '25',  background: '#3f51b5'  },  iconButton: {  position: 'relative',  display: 'flex',  alignItems: 'center',  justifyContent: 'center',  width: 50,  height: 50,  color: '#333333',  background: '#dddddd',  border: 'none',  outline: 'none',  borderRadius: '50%',  'amp;:hover': {  cursor: 'pointer'  },  'amp;:active': {  background: '#cccccc'  }  },  iconButton__badge: {  position: 'absolute',  top: -10,  right: -10,  width: 25,  height: 25,  background: 'red',  color: '#ffffff',  display: 'flex',  justifyContent: 'center',  alignItems: 'center',  borderRadius: '50%'  } } ));  const classes = useStyles(); const theme = useTheme();   return (  lt;divgt;  lt;headgt;  lt;meta charset="UTF-8" /gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /gt;  lt;titlegt;Icon Button Notification Badgelt;/titlegt;  lt;link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet" /gt;  lt;/headgt;   lt;body className={classes.body}gt;  lt;button type="button" className={classes.iconButton}gt;  lt;span class="material-icons"gt;notificationslt;/spangt;  lt;span className={classes.iconButton__badge}gt;{newNotifications.length}lt;/spangt;  lt;/buttongt;  lt;/bodygt;  {notificationClicked ? lt;NotificationList notifications={newNotifications} /gt; dispatch(notificationsStateUpdate({newNotifications})) : null}  lt;/divgt;  ); }  

Если я правильно понимаю, это должно сработать

 lt;NotificationList   notificationClicked, // pass in as prop instead of a ternary  notifications={newNotifications} /gt;     

затем позвоните своему диспетчеру в useEffect в списке уведомлений

 lt;NotificationListgt; /////  useEffect =(() =gt; {  //Whatever else  if (notificationClicked) {  dispatch(notificationsStateUpdate({newNotifications}))  }      },[notificationClicked])