IT技术 - React Hooks：如何传递props setState，同时使用相同的 setState itslef？ - 吾爱随笔录

我有一个包含 50 多个组件的react应用程序。其中很少有组件共享一个共同的状态。

一切都很顺利，直到我到达 Modal 组件，它包含 5 个其他组件（就像选项卡，每个都有自己的组件和内容），它们共享相同的状态值，所以我将它们作为props传递，一次每个组件. 我注意到这是非常低效的，因为我可以看到视觉滞后（在我的模态组件中），这在其他组件中不存在。

我在这里的问题是将我的状态导入或传递给子组件的正确方法是什么，有人建议我使用上下文，但它不适合我的应用程序。

下面是我的代码，很抱歉我无法在沙盒上重现此错误，因为应用程序太大。

父组件（用户看到的主页，当他单击添加按钮时，我获取相关props并将其发送到模态组件，然后该组件获取该状态并在其其他五个子组件（选项卡）之间共享它）

主页在此功能记录中是我发送到模态的props

   function MainPage = () => { 
    return <Modal record={record} />
    }

模态组件

 function modal({record}){ // destructing the props here
    return(
      <TabPane
                tab={
                  <span>
                    <InfoCircleOutlined style={{ fontSize: 14 }} />
                    Tab1
                  </span>
                }
                key="1"
              >
                  <component1 formProp={form} record={record} />
                
              </TabPane>
     <TabPane
                tab={
                  <span>
                    <InfoCircleOutlined style={{ fontSize: 14 }} />
                    Tab1
                  </span>
                }
                key="1"
              >
                  <component2 formProp={form} record={record} />
                
              </TabPane>
    )
}

同样，我的模态组件中还有其他三个组件，每个组件都需要相同的记录props来呈现自己的内容。

我在这里做错了什么以及导致滞后的原因是什么？再次，我很抱歉代码片段不够详细，如果您需要任何澄清，请告诉我。

更新：

在接受建议并查看之后，我认为这就是导致滞后的原因。

所以这是我的模态组件：

步骤1

  const [modalContent, setModalContent] = useState({
    title: '',
    content: '',
    visible: false,
  })

它通过按钮的这个 onClick 属性触发，

第2步

            <Button
              onClick={() => {
                setModalContent({
                  title: 'Edit Pay Item',
                  content: <Test record={record} modal={setModalContent} 
                  visible: true,
                })
              }}
            />

第 3 步：这里是我的模态滞后的地方。

所以我重用了相同的模态组件，它永远不会滞后，但在这个特定的情况下存在问题。

如果您在下面看到这一行，我正在将 setModalContent 本身作为props传递，而我正在使用它。也许这就是它落后的原因。那么实现这个逻辑的更好方法是什么？我需要在使用 setState（即 setModalContent）本身时传递 setModalContent。

setModalContent({ title: 'Edit Pay Item', content: <Test record={record} modal={setModalContent} visible: true, })