在反應組件中獲取數據作為變量

Question

我必須從另一個文件獲取數據，但作為一個變量，我將在主文件中聲明數據源。 下面是組件和主文件的代碼。 問題出在組件文件中，因為這樣聲明變量不起作用。

組件代碼：

  const Sylwetka = ({bg, dataSource}) => {
  return (
    <div>
      <Navbar />
      <div className={`h-[50vh] p-4 ${bg}`}>
        {{dataSource}.map((data) => {
          return (
            <div>
              <h1 className='text-5xl font-extrabold opacity-60'>{data.title}</h1>
            </div>
          );
        })}
      </div>
    </div>
  )
}

export default Sylwetka

主要應用程序代碼：

const App = () => {
  return (
    <div className="lato text-white">
    <BrowserRouter>
      <Routes>
        <Route path='/*' element={<Home />}/>
        <Route path='/dahmer' element={<Sylwetka bg='dahmer-bg' dataSource={dahmerData}/>}/>
      </Routes>
    </BrowserRouter>
    </div>
  );
}

export default App;

Answer 1

看起來您的組件代碼中的問題是由數據源周圍的大括號引起的。 這些大括號導致 dataSource 變量被視為 JavaScript object 文字，而不是變量。

要解決此問題，您只需刪除數據源周圍的花括號即可：

const Sylwetka = ({bg, dataSource}) => {
  return (
    <div>
      <Navbar />
      <div className={`h-[50vh] p-4 ${bg}`}>
        {dataSource.map((data) => {
          return (
            <div>
              <h1 className='text-5xl font-extrabold opacity-60'>{data.title}</h1>
            </div>
          );
        })}
      </div>
    </div>
  )
}

export default Sylwetka

通過此更改，dataSource 變量將被正確解釋為變量，並且 map function 將能夠迭代其元素。

Answer 2

• 您有語法錯誤，將“ {dataSource}.map ”更改為“ dataSource.map ”。

• 不要忘記聲明您的“ dahmerData ”。

如果下面的代碼解決了您的問題，請在評論中提供反饋並解決您的帖子。

組件代碼：

 const Sylwetka = ({bg, dataSource}) => { return ( <div> <Navbar /> <div className={`h-[50vh] p-4 ${bg}`}> {dataSource.map((data) => { return ( <div> <h1 className='text-5xl font-extrabold opacity-60'>{data.title}</h1> </div> ); })} </div> </div> ) } export default Sylwetka

主要應用程序代碼：

 const dahmerData = []; // your dataSource variable... const App = () => { return ( <div className="lato text-white"> <BrowserRouter> <Routes> <Route path='/*' element={<Home />}/> <Route path='/dahmer' element={<Sylwetka bg='dahmer-bg' dataSource={dahmerData}/>}/> </Routes> </BrowserRouter> </div> ); } export default App;