标签：submenu map 张三 React 赵六 李四 key 王五 row

再项目中使用baseUI时，根据文档构建视图,

但是数据用数组遍历时无非给<></> 绑定key值。出现index.js:1 Warning: Each child in a list should have a unique "key" prop.报错

 

 

const data: mockDataProps[] = [
  {
    menu: '项目管理',
    submenu: ['交互项目', '电子杂志'],
    role: [['张三', '李四', '王五', '赵六'], ['张三', '李四', '王五', '赵六'], ['张三', '李四', '王五', '赵六'], ['张三', '李四', '王五', '赵六']],
  },
  {
    menu: '付费管理',
    submenu: ['订单管理', '价格管理', '兑换码管理'],
    role: [['张三', '李四', '王五', '赵六'], ['张三', '李四', '王五', '赵六'], ['张三', '李四', '王五', '赵六'], ['张三', '李四', '王五', '赵六']],
  },
  {
    menu: '推广管理',
    submenu: ['推广管理'],
    role: [['张三', '李四', '王五', '赵六'], ['张三', '李四', '王五', '赵六'], ['张三', '李四', '王五', '赵六'], ['张三', '李四', '王五', '赵六']],
  },
  {
    menu: 'C端用户管理',
    submenu: ['C端用户管理'],
    role: [['张三', '李四', '王五', '赵六'], ['张三', '李四', '王五', '赵六'], ['张三', '李四', '王五', '赵六'], ['张三', '李四', '王五', '赵六']],
  },
  {
    menu: '讨论组管理',
    submenu: ['讨论管理', '评价管理'],
    role: [['张三', '李四', '王五', '赵六'], ['张三', '李四', '王五', '赵六'], ['张三', '李四', '王五', '赵六'], ['张三', '李四', '王五', '赵六']],
  }
];

const MenuTab: React.FC = () => {
  const [css] = useStyletron();

  return (
    <Block>
      <Block className="search-form">
        <form>
          <Block className={css({
            display: 'flex',
          })}>
            <FormControlSmall label="一级菜单">
              <Select size={SELECT_SIZE.compact}></Select>
            </FormControlSmall>
            <FormControlSmall label="二级菜单">
              <Select size={SELECT_SIZE.compact}></Select>
            </FormControlSmall>
            <Block className={css({
              paddingTop: '44px',
            })}>
              <span className={
                css({
                  marginLeft: '4px',
                  marginRight: '12px',
                })
              }>
                <Button
                  onClick={() => alert("click")}
                  size={SIZE.compact}
                >
                  查询
                </Button>
              </span>
              <Button
                onClick={() => alert("click")}
                size={SIZE.compact}
              >
                重置
              </Button>
            </Block>
          </Block>
        </form>
      </Block>
      <Block className="search-table">
        <StyledRoot>
          <StyledTable>
            <StyledTableHeadRow>
              <StyledTableHeadCell>
                一级菜单
          </StyledTableHeadCell>
              <StyledTableHeadCell>
                二级菜单
          </StyledTableHeadCell>
              <StyledTableHeadCell>
                「查看」权限
          </StyledTableHeadCell>
              <StyledTableHeadCell>
                「新建」权限
          </StyledTableHeadCell>
              <StyledTableHeadCell>
                「修改」权限
          </StyledTableHeadCell>
              <StyledTableHeadCell>
                「删除」权限
          </StyledTableHeadCell>
            </StyledTableHeadRow>
            {data.map((row, rowIndex) => {
              return (
                <>
                  <StyledTableBodyRow key={rowIndex}>
                    <StyledTableBodyCell rowSpan={row.submenu.length++}>{row.menu}</StyledTableBodyCell>
                  </StyledTableBodyRow>
                  {row.submenu.map((submenu, submenuIndex) => {
                    return <StyledTableBodyRow key={`${submenuIndex}-${rowIndex}`}>
                      <StyledTableBodyCell>{submenu}</StyledTableBodyCell>
                      {row.role.map((item, index) => {
                        return <StyledTableBodyCell key={`${index}-${submenuIndex}-${rowIndex}`}><Tag>{item}</Tag></StyledTableBodyCell>
                      })}
                    </StyledTableBodyRow>
                  })}
                </>
              )
            })}
          </StyledTable>
        </StyledRoot>

      </Block>
    </Block>
  );
}

 

解决方案：

{data.map((row, rowIndex) => {               return (                 row.submenu.map((submenu, submenuIndex) => {                   return (                     [                       submenuIndex === 0 && (<StyledTableBodyRow key={rowIndex}>                         <StyledTableBodyCell rowSpan={row.submenu.length++}>{row.menu}</StyledTableBodyCell>                       </StyledTableBodyRow>),                       <StyledTableBodyRow key={`${submenuIndex}-${rowIndex}`}>                         <StyledTableBodyCell>{submenu}</StyledTableBodyCell>                         {row.role.map((item, index) => {                           return <StyledTableBodyCell key={index}><Tag>{item}</Tag></StyledTableBodyCell>                         })}                       </StyledTableBodyRow>                     ]                   )                 })               )             })}

 

标签：submenu,map,张三,React,赵六,李四,key,王五,row
来源： https://www.cnblogs.com/kangxinzhi/p/15134166.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。