Reactjs 如何解决此错误ReferenceError:无法访问'；循环图像'；初始化前

我正在做一个React项目。在我的项目中，我有四个按钮，第一个按钮是前端，第二个按钮是中间件，第三个按钮是数据库，第四个按钮是应用程序。 现在在初始状态下，我必须只显示React图像。当我单击中间件按钮时，我必须显示节点js图像，我必须隐藏剩余的所有内容。当我点击数据库按钮时，我必须显示Mongodb图像，我必须隐藏剩余的全部。当我点击应用程序按钮时，我必须显示React原生图像，我必须隐藏剩余的全部

这是App.js

import React, { useState } from 'react';
import './App.css';


const App = () => {

  const [showReactImage, setShowReactImage] = useState(loopReactImages)

  const reactShell = ['one']
  const loopReactImages = reactShell.map((currentValue) => {
    return <img src={require('./assets/images/Frontend/one'+currentValue+'.png')} alt ='image'></img>
  })

  return (
    <div className='container'>
      <div className='row'>
        <div className='col-3'>
          <button className='btn btn-primary'>Frontend</button>
        </div>
        <div className='col-3'>
          <button className='btn btn-danger'>Middleware</button>
        </div>
        <div className='col-3'>
          <button className='btn btn-success'>Database</button>
        </div>
        <div className='col-3'>
          <button className='btn btn-info'>Apps</button>
        </div>
      </div>
      <div className='row'>
        <div className='col-12'>
          {showReactImage}
        </div>
      </div>
    </div>
  )
}

export default App;

import React，{useState}来自“React”；
导入“/App.css”；
常量应用=（）=>{
常量[showReactImage，setShowReactImage]=useState（loopReactImages）
常量reactShell=['one']
const loopReactImages=reactShell.map（（currentValue）=>{
返回
})
返回(
前端
中间件
数据库
应用程序
{showReactImage}
)
}
导出默认应用程序；

它正在显示此类错误ReferenceError:在初始化之前无法访问“loopReactImages”