certData是对象，而不是数组值。
我有一个简单的React表初始化，它创建了一个TypeError:data.map不是一个函数。如果我将一个简单的数组(如[1，2，3](而不是作为对象的certData变量传递到表中，则该表将呈现。
我想呈现一个具有所有不同"；全名"；s和一个"s"的列表；别名"；谁把它们放在右边的栏里。所以它看起来像：
123 | ABC, DEC
789 | GHI
这是我现在的代码
const TeamExpertiseTable = (props) => {
const certData = props.teamCerts;
console.log(certData);
const columns = () => {
return [
{
header: 'Certification Name',
accessor: 'Cert Name'
},
{
header: 'Team Members',
accessor: 'Alias'
}
]
}
return (
<div>
<Table
activeSortID="Cert Name"
columns={columns()}
data= {certData}
isStriped={true}
shouldAutoCollapseOnExpand={false}
sortDirection="ascending"
spacing="default"
/>
</div>
);
}
其中certData对象如下：
{
"Count": 79,
"cert": [
{
"Full Name": "ABC",
"Alias": "ABC",
"Cert Type": "ABC",
"Cert Name": "123"
},
{
"Full Name": "DEF",
"Alias": "ABC",
"Cert Type": "ABC",
"Cert Name": "123"
}
],
[
"non_cert": [
{
"Full Name": "GHI",
"Alias": "ABC",
"Cert Type": "ABC",
"Cert Name": "789"
}
]
}
certData是一个对象，而Table组件需要一个数组，该数组在其原型中包含一个map方法。您可以通过certData.cert或certData['cert']
您需要向它传递一个数组，并且certData在您的情况下是一个对象。
您应该通过certData.cert或certData.non_cert:
return (
<div>
<Table
activeSortID="Cert Name"
columns={columns()}
data= {certData.cert}
isStriped={true}
shouldAutoCollapseOnExpand={false}
sortDirection="ascending"
spacing="default"
/>
</div>
);
请试试这个。
<Table
activeSortID="Cert Name"
columns={columns()}
data= {certData.cert}
isStriped={true}
shouldAutoCollapseOnExpand={false}
sortDirection="ascending"
spacing="default"
/>
如果你想要证书和非证书数据
let dataArray = [];
dataArray.push(certData.cert)
dataArray.push(certData.non_cert)
...
<Table
activeSortID="Cert Name"
columns={columns()}
data= {dataArray}
isStriped={true}
shouldAutoCollapseOnExpand={false}
sortDirection="ascending"
spacing="default"
/>
我假设您在cert属性上循环，在这种情况下，您将需要用一个空数组或：初始化teamCerts
const certData = props.teamCerts.cert || [];
使用类型脚本时，必须定义对象或数组
type Cert = {
"Full Name"?: string,
"Alias"?: string,
"Cert Type"?: string,
"Cert Name"?: string
}
之后，您可以获得此类型的数据。
const ChildComponent = ({data}:Cert[]) = >{
data.map((item, key)=>(
<React.Fragment key={key}>
{item.Full Name}
</React.Fragment>
))
}
如果有任何错误，请告诉我。