Question

如何在 React 中将对象数组作为 prop 传递？

2020-11-16

131

reactjs react-props

我试图将一个对象数组传递给 React 上的一个函数，我得到了 Uncaught TypeError 的错误： props.map 不是一个函数，尽管当我在传递之前将 props（即用户）打印到日志中时，它是一个数组

我有以下数据：

{
"name": "My test name",
"users": [
    {
        "name": "user 1 name",
        "data": [
            {
                "var1": [],
                "var2": {
                    "sub1": "open",
                    "sub2": ""
                },
            },
            {
                "var1": [],
                "var2": {
                    "sub1": "close",
                    "sub2": ""
                },
            },
        ]
    }
]}

数据由 REST API 调用接收。我试图使用以下 React 代码来处理它：

interface SingleUser {
  var1: string[];
  var2: {
    sub1: string;
    sub2: string;
  }
  
}
interface Users {
    name: string;
    users:SingleUser[];
}

render() {
const { name, users} = this.state;
return (
  <div className='flow d-flex flex-row flex-wrap justify-content-start'>
    <GenInfo name={name} />
    <MyTabs {...users}/>
  </div>
);}



function MyTabs(props: Users[]) {
  const data = props
  const tabs = props.map((item) => {
    return {
      tabId: item.name.replace(/ /g,"_"),
      label: item.name,
      content: <TestTable {...item.users} />
    }
  });
  return <HorizontalTabs tabs={tabs} pills />
}

Answer 1

你可以将 props ò MyTabs 定义为这样的数据

render() {
const { name, users} = this.state;
return (
  <div className='flow d-flex flex-row flex-wrap justify-content-start'>
    <GenInfo name={name} />
    <MyTabs data={users}/>
  </div>
);}

function MyTabs({data: Users[]}) {
  const tabs = data.map((item) => {
    return {
      tabId: item.name.replace(/ /g,"_"),
      label: item.name,
      content: <TestTable {...item.users} />
    }
  });
  return <HorizontalTabs tabs={tabs} pills />
}