Question

我正在尝试渲染使用过滤器数组的组件，以形成一个列表。我将数组作为参数传递给函数，但它返回错误。该数组不是null或未定义，因为如果我登录到控制台，它将显示itens。

Console.log返回：

这是我的代码：

 const List = (filtrosPorTipo) => {
    let filtros = filtrosPorTipo[0]
    let valoresDosFiltros = filtrosPorTipo[1]

    let lista = (
      <List>
        {filtros.map((item, index) => {
          return (
            <>
              <ListItem
                button
                onClick={() => setOpen({ [item]: !open[item] })}
                key={item}
              >
                <ListItemText primary={item} />
                {open[item] ? <ExpandLess /> : <ExpandMore />}
              </ListItem>
              <Collapse in={open[item]} timeout='auto'>
                <List component='div' disablePadding>
                  {valoresDosFiltros[index].map((filtro) => {
                    return (
                      <>
                        <ListItem key={filtro}>
                          <p>{`${filtro}\n`}</p>
                          <ListItemSecondaryAction>
                            <Checkbox
                              label={filtro}
                              key={filtro.toString()}
                              color='primary'
                              onChange={() => handleChecked(filtro)}
                              checked={checked[filtro]}
                            />
                          </ListItemSecondaryAction>
                        </ListItem>
                        <Divider />
                      </>
                    )
                  })}
                </List>
              </Collapse>
            </>
          )
        })}
      </List>
    )

    return lista
  }

错误：

Answer 1

也许在分配“ filtros”之前尝试渲染的组件。这是React中常见的逻辑行为。

尝试在.map（）调用之前添加条件：

    col1
0  user1
1  user2

Answer 2

可以像这样在值存在时映射它们。如果您不打算在等待数据的过程中显示“正在加载”屏幕，则可以进行此操作。否则，请像其他答案一样使用三元运算符。

{filtros && filtros.map((item, index) => {
      return (
        <>
          <ListItem
            button
            onClick={() => setOpen({ [item]: !open[item] })}
            key={item}
          >
            <ListItemText primary={item} />
            {open[item] ? <ExpandLess /> : <ExpandMore />}
          </ListItem>
          <Collapse in={open[item]} timeout='auto'>
            <List component='div' disablePadding>
              {valoresDosFiltros[index].map((filtro) => {
                return (
                  <>
                    <ListItem key={filtro}>
                      <p>{`${filtro}\n`}</p>
                      <ListItemSecondaryAction>
                        <Checkbox
                          label={filtro}
                          key={filtro.toString()}
                          color='primary'
                          onChange={() => handleChecked(filtro)}
                          checked={checked[filtro]}
                        />
                      </ListItemSecondaryAction>
                    </ListItem>
                    <Divider />
                  </>
                )
              })}
            </List>
          </Collapse>
        </>
      )
    })}

Answer 3

渲染组件时，您必须检查filtrosPorTipo中的数据。是否具有数组值。如下所示：

const List = (filtrosPorTipo) => {
  if (filtrosPorTipo && filtrosPorTipo.length > 0) {
    let filtros = filtrosPorTipo[0]
    let valoresDosFiltros = filtrosPorTipo[1]

    let lista = (
      <List>
        {filtros.map((item, index) => {
          return (
            <>
              <ListItem
                button
                onClick={() => setOpen({ [item]: !open[item] })}
                key={item}
              >
                <ListItemText primary={item} />
                {open[item] ? <ExpandLess /> : <ExpandMore />}
              </ListItem>
              <Collapse in={open[item]} timeout='auto'>
                <List component='div' disablePadding>
                  {valoresDosFiltros[index].map((filtro) => {
                    return (
                      <>
                        <ListItem key={filtro}>
                          <p>{`${filtro}\n`}</p>
                          <ListItemSecondaryAction>
                            <Checkbox
                              label={filtro}
                              key={filtro.toString()}
                              color='primary'
                              onChange={() => handleChecked(filtro)}
                              checked={checked[filtro]}
                            />
                          </ListItemSecondaryAction>
                        </ListItem>
                        <Divider />
                      </>
                    )
                  })}
                </List>
              </Collapse>
            </>
          )
        })}
      </List>
    )

    return lista
  }
  return 'No data available!'
}

无法读取未定义反应的属性映射

3 个答案: