在反应组件中获取数据作为变量

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;