尝试呈现部分列表时出错答案

【问题标题】：Errors when try to render a Section List尝试呈现部分列表时出错
【发布时间】：2021-01-09 16:33:57
【问题描述】：

我正在尝试渲染 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>
    );
}

【问题讨论】：

标签： javascript android react-native react-hooks

【解决方案1】：

看起来您正试图在这一行中传递一个数据数组

const dataEmbaralhada = embaralhar(data);

需要一个数组，但在SectionList

const {data, esporte, quantidadeTimes} = route.params;

你已经解构了data，它可能不存在于route.params，它作为undefined 传入embaralhar 函数，然后你试图在embaralhar 中循环遍历undefined我假设的函数是抛出Cannot read property 'length' of undefined。另一个原因可能是 embaralhar 没有返回任何内容。由于separarTimes 也依赖于data，它也会因为同样的原因而中断。此外，据我所知，不可能在 route.params 中传递数组，这样做也不是一个好主意。尝试以其他方式提取数据。就像props 或使用context API。希望这会有所帮助。试试这个。

【讨论】：

好吧，我在 console.log 上测试了这两个函数（embaralhar 和 separarTimes），并且都有效。
你是否从embaralhar函数返回了数组

【解决方案2】：

你正在阅读

const dataEmbaralhada = embaralhar(data);

但是你的 embaralhar 函数什么也不返回

【讨论】：