迭代数值并作为道具发送

Question

我有一个数组的数组，我使用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.任何帮助？

Answer 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}/>的简短版本

Answer 2

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

this.state.listItems.forEach((myListItem, index) => {
      news.push(<MyComponent
        key={index}
        index={index+1}
        />);
});