开发者问题收集

尝试渲染部分列表时出错

2021-01-09
827

我尝试渲染 SectionList ,但它返回了三个错误:

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

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))

示例 timesSeparados

[
  {
    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
      },
    ]
  }
]

代码 SectionList

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

代码渲染项:

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>
    );
}
2个回答

看来您正在尝试在此行中传递一系列数据

489915609

期望一个数组,但在 section> sectionlist

const {data,eSporte,dentIdAdetimes} = route.params;

您已经破坏了 data ,这些 可能不存在于<代码> rout.params ,它以 embaralhar 函数作为 undefined 函数,然后您尝试通过该 undefined 在 embaralhar 函数中,我假设要扔 无法读取未定义的 的属性“长度”。另外,另一个原因可能是从 embaralhar 返回。由于 Syparatimes 也取决于 数据 它也会因相同的原因而破裂。此外,据我所知,不可能在 route.params 中传递数组,也不是一个好主意。尝试以其他方式提取数据。如 props 或使用 上下文API 。希望这会有所帮助。尝试一下。

Md.Reyad Hossain
2021-01-09

您正在阅读

const dataEmbaralhada = embaralhar(data);

但您的 embaralhar 函数未返回任何内容

Danny
2021-01-09