javascript - 动态标签名称

Question

我正在尝试将动态标签命名系统从 React 转换为更像钩子的方法，我正在做的是首先导入和导出一些组件，以便我可以一次将它们全部拉到数组上，如下所示：

import Component1 from './Component1/Component1'
import Component2 from './Component2/Component2'

 export {
     Component1,
     Component2
 }

然后我像这样加载它们：

import { useState, useEffect } from "react";
import * as Components from './../AllComponents/Components'

function importHook() {

  const [states, setStates] = useState({
    components: [],
    currentComponent: 0
  })

  useEffect(() => {
    Object.entries(Components).forEach(component => {
      setStates(prevState => ({ components: [...prevState.components, component[1]]}))
   })
  }, []) // Look's into Components and adds every component to the 'components' array so that I can use that array in the next step.

  return states;
}

export default importHook

之后我继续这样做：

import React from 'react'
import './MainComponent.scss'
import importHook from '../../importHook'

function MainComponent() {

    const { components, currentComponent } = importHook() // Pull and set the values using the hook 

    const TagName = components[currentComponent] // Created the tag name by targeting the first function, seeing as currentComponent should be 0 at the time

    console.log('Tag:  ' + TagName) // undefined

    return (
        <div className="h-100">
            <TagName /> // crashes everything
        </div>
    )

}

export default MainComponent

所以我发现<TagName />导致一切崩溃的原因是因为某些东西运行了两次。

如果您删除<TagName />以便可以从 to 获取输出console.log并currentComponent在其中const TagName更改0，您会注意到第一次console.log运行是返回undefined，而第二次运行返回存储在数组中的实际函数。

所以真的我的问题是，为什么/什么执行两次？我有一个想法，我假设它是因为forEach添加到数组中或类似的东西，但我不完全确定。

可以做些什么，以便我们可以在返回这里之前准备好所有值？我还没有尝试过，但我想我可以引入一个if statement检查变量是否为空，如果是，显示某种加载屏幕或烦躁，但这对我来说似乎不是最好的解决方案，我知道有很多方法可以做某事，但并非所有方法都很好，因为我对这一切都很陌生，最好阅读/询问。

关于阅读部分，找不到太多关于解决这个问题或我提到的实现的信息，我尝试过 useEffect、useCallback 等，但不确定我是否做错了......

标签： javascriptreactjsreact-hooks