React中从函数传递数组的正确语法？新手组件传值报错求助

你的核心问题是把返回数组的函数当成了直接的数组来使用：TitleData是一个组件函数，你必须执行它才能拿到它返回的数组，而直接访问TitleData[0]是在取函数对象的第0个属性，根本不是你要的数组元素。

两种修复方案 #

方案1：把TitleData改成普通数组导出（推荐） #

既然它只是提供数据，没必要写成组件函数，直接导出数组即可：

// title-data.js
export default ["My Title Test"];

然后在App组件里正常使用：

import './App.css'
import AntButton from './hover-click-button'
import TitleData from './web-data/title-data'

export default function App() {
  return (
    <main>
     <AntButton title={TitleData[0]} />
    </main>
  )
}

方案2：执行TitleData函数获取数组 #

如果一定要保留TitleData的函数形式，你需要调用这个函数拿到返回的数组：

import './App.css'
import AntButton from './hover-click-button'
import TitleData from './web-data/title-data'

export default function App() {
  // 先调用函数拿到数组
  const titleArray = TitleData();
  return (
    <main>
     <AntButton title={titleArray[0]} />
    </main>
  )
}

或者直接在JSX里内联调用：

<AntButton title={TitleData()[0]} />

内容的提问来源于stack exchange，提问作者SputnikDrunk2