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

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

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
  }

const List=（过滤器端口）=>{
设filtros=filtrosPorTipo[0]
让从价过滤=过滤端口[1]
让lista=(
{filtros.map（（项目，索引）=>{
返回(
setOpen（{[item]：！open[item]}）
键={item}
>
{打开[项目]？：}
{valoresDosFiltros[index].map（（filtro）=>{
返回(
{`${filtro}\n`}

手动检查（过滤器）}
已检查={已检查[filtro]}
/>
)
})}
)
})}
)
返回列表a
}

错误：

---

可能是在分配“filtros”之前它试图渲染的组件。这是React中常见的逻辑行为

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

{filtros？filtros.map（（项目，索引）=>{
返回(
setOpen（{[item]：！open[item]}）
键={item}
>
{打开[项目]？：}
{valoresDosFiltros[index].map（（filtro）=>{
返回(
{`${filtro}\n`}

手动检查（过滤器）}
已检查={已检查[filtro]}
/>
)
})}
)
})：null}

当值像这样出现时，您可以映射这些值。如果您不打算在等待数据的过程中显示加载屏幕，那么这将起作用。否则，使用三元运算符，就像另一个答案一样

{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>
        </>
      )
    })}

{filtros&&filtros.map（（项目，索引）=>{
返回(
setOpen（{[item]：！open[item]}）
键={item}
>
{打开[项目]？：}
{valoresDosFiltros[index].map（（filtro）=>{
返回(
{`${filtro}\n`}

手动检查（过滤器）}
已检查={已检查[filtro]}
/>
)
})}
)
})}

渲染组件时，必须在

过滤器端口中检查数据。它是否有数组值。如下图所示：

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!'
}

const List=（过滤器端口）=>{
如果（filtersportipo&&filtersportipo.length>0）{
设filtros=filtrosPorTipo[0]
让从价过滤=过滤端口[1]
让lista=(
{filtros.map（（项目，索引）=>{
返回(
setOpen（{[item]：！open[item]}）
键={item}
>
{打开[项目]？：}
{valoresDosFiltros[index].map（（filtro）=>{
返回(
{`${filtro}\n`}

手动检查（过滤器）}
已检查={已检查[filtro]}
/>
)
})}
)
})}
)
返回列表a
}
返回“没有可用数据！”
}
尝试
filteros&&filteros.map（）
。如果需要，请添加示例代码，以便更好地进行调试。
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!'
}