Question

我是钩子的新手，我在这里遇到了这个示例：https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/redux-example，它是一个类组件，我正在尝试将其转换为带钩子的函数。我可以按原样使用它，但是原因是我也想学习。

我尝试使用useEffect来实现它，但是我没有达到预期的效果，因为我仍然只显示一次通知，例如，如果我再次尝试创建一个待办事项，它就不会出现。

function Notifier(props) {
  const { notifications, removeSnackbar } = props;
  const { enqueueSnackbar } = useSnackbar();
  const [displayed, setDisplayed] = useState([]);

function storeDisplayed(key) {
  setDisplayed([...displayed, key]);
}

console.log(displayed)

notifications.forEach((notification) => {
  setTimeout(() => {

  // If notification already displayed, abort
  if (displayed.indexOf(notification.key) >= 0) return;

  // Display notification using notistack
  enqueueSnackbar(notification.message, notification.options);

  // Add notification's key to the local state
  storeDisplayed(notification.key);

  // Dispatch action to remove the notification from the redux store
  removeSnackbar(notification.key);

 }, 1);
 });

return null;
}

我想在创建或编辑内容时显示通知。

Answer 1

将依赖性数组作为第二个参数添加到使用效果

useEffect(() => {
//something
  };
}, [props.friend.id]); // Only re-subscribe if props.friend.id changes

Answer 2

实现的解决方案是缺少-未定义的键，所以我要做的是将键添加到redux存储中并将其传递给组件props。

function Notifier(props) {
 const { notifications, removeSnackbar } = props;
 const { enqueueSnackbar } = useSnackbar();
 const [displayed, setDisplayed] = useState([]);

function storeDisplayed(key) {
 setDisplayed([...displayed, key]);
}

notifications.forEach((notification) => {
 setTimeout(() => {

 // If notification already displayed, abort
if (displayed.indexOf(notification.options.key) >= 0) return;

// Display notification using notistack
enqueueSnackbar(notification.message, notification.options);

// Add notification's key to the local state
storeDisplayed(notification.options.key);

// Dispatch action to remove the notification from the redux store
removeSnackbar(notification.options.key);

 }, 1);
});

return null;
}

使用等效于shouldComponentUpdate和componentDidUpdate的钩子将类转换为功能组件

2 个答案: