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

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;
}