Question

我创建了以下上下文提供程序。归根结底，它是一个吐司生成器。它可以同时显示多个 Toast。

一切都很好，直到我意识到在树下调用 <Component/> 的 const context = useContext(ToastContext) 也就是这个上下文的消费者和 toast 通知的创建者，也在重新渲染当 providerValue 发生变化时。

我试图阻止这种情况发生，将 providerValue 的 useMemo 更改为 useState 挂钩，这确实阻止了我的重新渲染问题，但现在我只能一次激活 1 个 toast（因为从未在 add 函数内更新 toast）。

有没有办法同时拥有我的两种情况？

export const withToastProvider = (Component) => {
  const WithToastProvider = (props) => {
    const [toasts, setToasts] = useState([])
    const add = (toastSettings) => {
      const id = generateUEID()
      setToasts([...toasts, { id, toastSettings }])
    }
    const remove = (id) => setToasts(toasts.filter((t) => t.id !== id))
    // const [providerValue] = useState({ add, remove })
    const providerValue = React.useMemo(() => {
      return { add, remove }
    }, [toasts])

    const renderToasts = toasts.map((t, index) => (
      <ToastNote key={t.id} remove={() => remove(t.id)} {...t.toastSettings} />
    ))

    return (
      <ToastContext.Provider value={providerValue}>
        <Component {...props} />
        <ToastWrapper>{renderToasts}</ToastWrapper>
      </ToastContext.Provider>
    )
  }

  return WithToastProvider
}

Answer 1

谢谢@cbdeveloper，我想通了。

问题不在于我的上下文，而在于调用者。我需要在那里使用 useMemo() 来记住不需要更新的组件部分。

防止 context.consumer 重新渲染组件

1 个答案: