迭代数值并作为道具发送

问题描述 投票:1回答:2

我有一个数组的数组,我使用forEach将值作为道具传递给组件。我还希望将值作为props发送,并在每次迭代时将其增加1。目前我尝试过:

this.state = {
 index: 0
}
 let news:any[] = []; //container for other items for the loop
let indx = this.state.index;

    this.state.listItems.forEach((myArrWItems) => {

      indx = +1;
      news.push(<MyComponent


        index = {indx}

        />);
    });

但是,作为道具发送的值总是1.任何帮助?

javascript reactjs typescript
2个回答
1
投票

那里没有必要你的index状态变量。由于您要从现有数组创建数组,因此您应该使用map函数,如官方文档中所示。

这个函数将为你的回调提供元素的index,作为第二个参数。

您的编码可以缩减为一行:

const news = this.state.listItems.map((item, index) => <MyComponent key={index} index={index + 1}/>)

在制作数组时,不要忘记设置组件的key prop。

<MyComponent index/>语法是<MyComponent index={index}/>的简短版本


1
投票

你永远不会更新你的index变量,你只需要给从未变异的indx变量赋值+1。你需要的是更新你的状态并以这种方式递增你的indx变量并将你的值推送到setState回调中的数组中,但我建议你在forEach循环中使用当前索引数组元素,因为它是做什么的最好方法你想要 :

this.state.listItems.forEach((myListItem, index) => {
      news.push(<MyComponent
        key={index}
        index={index+1}
        />);
});
© www.soinside.com 2019 - 2024. All rights reserved.