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
  }

}

---

我添加了一个resizeeventlistener，它可以工作，我可以看到父组件Main中的状态正在更新。但是，当我检查子组件概要文件的状态时，我看到它已初始化为10，但再也无法访问，即使主状态已正确更新，也不会向发送新的道具。我正在尝试在子级中获取重新渲染器，但我不确定为什么父级未发送更新的道具，父级中的任何状态更改都会导致重新渲染器正确吗？

很难从可用代码中准确判断，但我怀疑子级未接收到新道具，因为这些子级存储在状态中且从未更新

---

要解决此问题，应在更新

numRows

或

numColumns

时更新子项。由于通常没有很好的理由将子项存储在状态变量中（这可能会导致这样的问题，您必须手动告诉子项进行更新，而不是让React处理更新），因此我建议完全删除

布局的状态存储，并像往常一样渲染子项。只需在返回的元素中直接使用
layoutList
。
感谢您的快速回复！我不知道在状态中存储子项会导致类似的问题，我这样做的原因是我想根据其他因素动态更改布局。我会看看是否能找到一个解决方法，但作为参考，如果存储在状态中，是否还有强制子项重新加载的方法？您可以重新定义
layoutList
，并将其传递给
setLayout
，但我建议不要这样做，因为React将在相关时处理更新子项。基本上，只要给孩子们传递道具就足够了，他们会相应地更新。
useEffect(() => {
  gridCount()
  window.addEventListener("resize", gridCount)
})