Question

我在另一个这样的文件中有数据

export const picker = [
  {
    gender: 'Male',
    region: ['France', 'Germany', 'Italy', 'Korea', 'Russia'],
  },
  {
    gender: 'Female',
    region: ['France', 'Germany', 'Italy', 'Korea', 'Russia'],
  },
];

我将其导入了我的父组件，我想使用数据2层次结构向下的子组件，看起来像这样

<Child1 picker={picker}/>

然后将其再次传递给Child1组件内的另一个子组件

<Child2 picker={picker} />

我想创建一个标签来显示区域

render() {
  const { picker } = this.props;
  return (
    <div>
      <AppBar position="static" color="default">
        <Tabs>
          //display the region
          {picker.map(item => {
            return item.region.map(subitem => {
              return <Tab label={subitem} />;
            });
          })}
        </Tabs>
      </AppBar>
    </div>
  );
}

它显示如下：

 France      Germany     Italy      Korea      Russia        France

它应该在末尾没有法国的情况下显示，所以最终将是俄罗斯，当我尝试进行console.log子项目时，如果我尝试进行console.log该项目，则我得到了多个子项目。 2个物体

Answer 1

您需要添加key属性并在选择器中的单个项目上进行迭代：

  ...
         //display the region
          {picker[0].regions.map(item => {
            return <Tab key={item} label={item} />;
          })}
  ...

或者如果male和female中可能存在不同的区域，则可以将它们汇总：

  ... 
        {picker.reduce((acc, curr) => {
          const depuded = curr.region.filter((i) => !acc.includes(i));
          return [...acc, ...depuded]
        }, []).map(item => (<Tab key={item} label={item} />))}
  ...

显示带有映射的数组在reactjs中变成多个

1 个答案: