React组件内chunk_array函数中for循环无法执行的问题排查

1. for循环变量未初始化 #

你的for循环里let i;没有给初始值，此时i的默认值是undefined。判断条件i < iteration中，undefined和数字（或NaN）比较的结果为false，循环直接跳过，自然不会输出i的日志。

修复：给i初始化为0，修改为：

for (let i = 0; i < iteration ;i++ )

2. 调用函数时缺少必要参数 #

在TableArray组件里调用chunk_array(details)时，只传了第一个参数list，第二个参数integer未传递，导致integer为undefined。计算+list.length/+integer时，相当于数字/NaN，结果为NaN，Math.ceil(NaN)还是NaN。此时i < iteration即undefined < NaN，结果依然是false，循环无法执行。

修复：调用时传入第二个参数（比如你代码里splice用了6，推测是想每6个元素分一组）：

const data = chunk_array(details, 6);

3. 额外问题：splice参数错误+修改原数组 #

你用splice(6, temp_arr.length)，但splice第一个参数是起始索引，第二个是删除数量，如果你想每次取integer个元素，应该用splice(0, integer)而非固定写6。另外temp_arr = list是引用赋值，splice会直接修改原details数组，这大概率不是你想要的效果，可以先复制数组避免修改原数据。

修复后的完整chunk_array函数 #

const chunk_array = (list, integer)=>{
    // 复制数组，避免修改原数据
    let temp_arr = [...list];
    console.log('chunks',list,'integer',integer);
    const list_of_chunks = [];
    // 处理参数无效的情况，避免除以0
    if (!integer || integer <= 0) return list_of_chunks;
    const iteration = Math.ceil(list.length / integer);
    for (let i = 0; i < iteration ;i++ ){
        console.log(i);
        // 从数组开头取integer个元素
        let temp_chunk = temp_arr.splice(0, integer);
        list_of_chunks.push(temp_chunk); 
    }; 
    return list_of_chunks;
}

内容的提问来源于stack exchange，提问作者gfek