Errors when rendering a Sectionlist with an object array

Asked

Viewed 25 times

0

I’m trying to insert a SectionList, but is returning in the console, in order, the following errors:

Uncaught TypeError: Cannot read property 'length' of undefined
The above error occurred in the <VirtualizedSectionList> component:
Uncaught TypeError: Cannot read property 'length' of undefined

Date code to put in SectionList:

const {data, esporte, quantidadeTimes} = route.params;
function embaralhar(array) {
for (let i = array.length - 1; i > 0; i--) {
  const j = Math.floor(Math.random() * (i + 1));
  [array[i], array[j]] = [array[j], array[i]];
}
}
function separarTimes(arr, tamanho) {
  var novoArray = [];
  var i = 0;
  var numeroTime = 1;
  while (i < arr.length) {
    novoArray.push({title: "Time "+ numeroTime, nomes: arr.slice(i, i + tamanho), });
    numeroTime += 1;
    i += tamanho;
  }
  return novoArray;
}
const dataEmbaralhada = embaralhar(data);
const timesSeparados = separarTimes(dataEmbaralhada, Math.trunc(data.length/quantidadeTimes))

Example timesSeparated:

[
  {
    title: "Time 1",
    nomes: [
      {
        nome: "Nome1",
        nivelId: 4,
        isGoleiro: false,
        id: 0
      },
      {
        nome: "Nome2",
        nivelId: 0,
        isGoleiro: false,
        id: 1
      },
      {
        nome: "Nome3",
        nivelId: 2,
        isGoleiro: true,
        id: 2
      },
    ]
  },
  {
    title: "Time 2",
    nomes: [
      {
        nome: "Nome1",
        nivelId: 4,
        isGoleiro: false,
        id: 0
      },
      {
        nome: "Nome2",
        nivelId: 0,
        isGoleiro: false,
        id: 1
      },
      {
        nome: "Nome3",
        nivelId: 2,
        isGoleiro: true,
        id: 2
      },
    ]
  }
]

Code SectionList:

<ListaNomes
  renderItem={renderItem}
  renderSectionHeader={({section: {title}}) => (
    <Text style={{fontWeight: 'bold'}}>{title}</Text>
  )}
  sections={timesSeparados}
  keyExtractor={(item, index) => item + index}
/>

Code rendering list items:

const renderItem = ({item}) => {
    return (
      <NomeItemContainer>
          <Nome>
              {item.nomes.nome}
          </Nome>
          <Infos>
              <Nivel>
                  {item.nomes.nivelId}
              </Nivel>
              {
                item.nomes.goleiro === true
                ? <MaterialIcons name="pan-tool" size={20} color="white" style={{paddingRight: 5}}/>
                : <Nome></Nome>
              }
          </Infos>
      </NomeItemContainer>
    );
}
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.