Javascript NextJS react hook-将异步状态传递给子组件

我对react hook还是新手，我不知道如何将异步状态的父对象传递给子对象

    const [isMob, setIsMob] = useState(null)
    useEffect(() => {
        setIsMob(window.matchMedia("(max-width: 991px)").matches ? true : false)
    }, [])
    
    ...

    <Child isMob={IsMob} />

---

因此，我可能想找到一个解决方案，比如async await或其他东西，将我的数据传递给孩子。但这可能不是正确的方法。

如果您想将状态传递给子组件，那么

const [isMob, setIsMob] = useState(null)
    useEffect(() => {
        setIsMob(window.matchMedia("(max-width: 991px)").matches ? true : false)
    }, [])



<Child isMob={isMob} />

const[isMob，setIsMob]=useState（null）
useffect（（）=>{
setIsMob（window.matchMedia（“（最大宽度：991px）”）。匹配？真：假）
}, [])

如果要将状态传递给子组件，则

const [isMob, setIsMob] = useState(null)
    useEffect(() => {
        setIsMob(window.matchMedia("(max-width: 991px)").matches ? true : false)
    }, [])



<Child isMob={isMob} />

const[isMob，setIsMob]=useState（null）
useffect（（）=>{
setIsMob（window.matchMedia（“（最大宽度：991px）”）。匹配？真：假）
}, [])

初始值为

null

，在第一次渲染时，传递给组件的是

isMob

的值。在第一次渲染之后，

useffect（）

设置

isMob

，并使用新值重新渲染组件

由于您是通过next.js使用SSR（服务器端渲染），因此需要使用

useffect（）

包装对

window

的调用，因为

window

仅在第一次渲染后可用。在这种情况下，块渲染

子对象

，直到设置

isMob

。例如：

const [isMob, setIsMob] = useState(null)

useEffect(() => {
  setIsMob(window.matchMedia("(max-width: 991px)").matches)
}, [])

return isMob === null ? null : <Child isMob={IsMob} />

---

初始值为

null

，在第一次渲染时，传递给组件的是

isMob

的值。在第一次渲染之后，

useffect（）

设置

isMob

，并使用新值重新渲染组件

由于您是通过next.js使用SSR（服务器端渲染），因此需要使用

useffect（）

包装对

window

的调用，因为

window

仅在第一次渲染后可用。在这种情况下，块渲染

子对象

，直到设置

isMob

。例如：

const [isMob, setIsMob] = useState(null)

useEffect(() => {
  setIsMob(window.matchMedia("(max-width: 991px)").matches)
}, [])

return isMob === null ? null : <Child isMob={IsMob} />

---

为什么不呢？坏拷贝和过去；）你刚刚在我的评论后做了一个编辑，为什么不呢？坏拷贝和过去；）您刚刚在我的评论后进行了编辑，lolReferenceError:未定义窗口。这就是为什么我将其设置为有效。有什么想法吗/我同意亚当的观点——你问错了问题。如果您在浏览器环境中，而不是在工作环境中，

窗口将始终可用。很抱歉，仍在编辑我的答案以向您显示我的所有内容。我也厌倦了你刚才说的三元。你在用SSR。因此，解决方案是使用
useffect
。在这种情况下，您需要使用类似于三元的东西来阻止第一次渲染
isMob
也可以是
false
，因此您需要明确检查
null
。如果我使用三元值阻止第一次渲染，我会在未更改的组件上收到另一个关于GetBoundingClientReferenceError的错误：未定义窗口。这就是为什么我将其设置为有效。有什么想法吗/我同意亚当的观点——你问错了问题。如果您在浏览器环境中，而不是在工作环境中，
窗口将始终可用。很抱歉，仍在编辑我的答案以向您显示我的所有内容。我也厌倦了你刚才说的三元。你在用SSR。因此，解决方案是使用
useffect
。在这种情况下，您需要使用类似于三元的东西来阻止第一次渲染
isMob
也可以是
false
，因此您需要显式检查
null
。如果我使用三元值阻止第一次渲染，我会在未更改的组件上得到另一个关于getBoundingClientRect的错误