时间戳

首页 > 解决方案 > React 钩子状态在父组件中更新但子组件没有收到新的道具

javascript - React 钩子状态在父组件中更新但子组件没有收到新的道具

问题描述

我正在使用一个 css 网格布局，它根据屏幕大小具有不同数量的列和行。

import React, { useState, useEffect } from 'react'

function Main() {

  const [numRows, setNumRows] = useState(10)
  const [numColumns, setNumColumns] = useState(10)

  const layoutList = [
      <Content {...props} />,
      <Content {...props2} />,
      <Profile {...props3} numColumns={numColumns} />,
    ]

  const [layout, setLayout] = useState(layoutList)

  let gridCount = () => {
    //code to count number of columns and rows
    //uses setNumRows and setNumColumns passed down as props
  }

}

创建组件的布局后，我定义了一个函数来计算行数和列数。

useEffect(() => {
  gridCount()
  window.addEventListener("resize", gridCount)
})

我添加了一个有效的调整大小事件监听器，我可以看到父组件 Main 中的状态正在更新。但是，当我检查子组件 Profile 的状态时，我看到它已用 10 初始化，但再也不会被访问，即使 Main 状态正在正确更新，也没有发送新的 props。我试图在孩子身上重新渲染，但我不确定为什么父母没有发送更新的道具，父母的任何状态变化都应该导致重新渲染正确吗？

标签： javascriptreactjsreact-hooks

解决方案

很难从可用的代码中准确判断，但我怀疑孩子们没有收到新的道具，因为这些孩子们存储在状态中并且从未更新过。

要解决此问题，您应该在更新numRows或更新时更新子级numColumns。由于通常没有充分的理由将子项存储在状态变量中（并且可能会导致这样的问题，您必须手动告诉子项进行更新而不是让 React 处理），我建议删除状态存储完全和只是让layout孩子们像往常一样。只需layoutList直接在您返回的元素中使用。

推荐阅读