如何解决此错误ReferenceError：初始化前无法访问“ loopReactImages”

Question

我正在一个React项目中，在我的项目中，我有四个按钮，第一个按钮是Frontend，第二个按钮是Middleware，第三个按钮是Database，第四个按钮是Apps。 现在，在初始状态下，我只需要显示React Image。当我单击“中间件”按钮时，我必须显示Node js Image，而我隐藏了所有剩余的东西。当我单击数据库按钮时，我必须显示Mongodb图像，而我将所有其余部分隐藏起来。当我单击“应用程序”按钮时，我必须显示React Native Image，而我隐藏了其余所有内容。

这是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;

它显示了这种错误ReferenceError：初始化前无法访问'loopReactImages'