For Loop总是返回preact中的最后一个索引

Question

我想创建一些分页链接，如果单击该链接，则应从循环索引中调用带有param的方法。

import {h} from 'preact';

const PageLink = (props) => {
    let totalPages = props.totalPages;
    let page = props.page;
    let link = [];
    let x = (indeks)=>{
        console.log(`yuhuuuuu ${indeks}`);
    }
    for(var i=1; i<=totalPages; i++){
        let pos = <li class="page-item"><a class="page-link" data-pos={i} href="" onClick={(e)=>{e.preventDefault();x(i)}}>{i}</a></li>
        link[i]=pos;
    }

    return (
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {link}
            </ul>
        </nav>
    )
}

export default PageLink

该链接显示为我想要的，但问题x（i）始终显示最后一个i，这是什么问题？