Блог

У меня есть массив со значениями, которые я использую forEach для передачи значений в качестве реквизита компоненту. Я также хочу отправлять значение в качестве реквизита и увеличивать его на 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. Любая помощь?

Ваша index переменная состояния там не нужна. Поскольку вы хотите создать массив из существующего, вы должны использовать map функцию, как показано в официальной документации.

Эта функция передаст вам index вашего элемента прямо в свой обратный вызов, в качестве второго аргумента.

Ваш код может быть сокращен до одной строки :

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

Не забудьте задать key реквизит вашего компонента при создании массива.

<MyComponent index/> Синтаксис представляет собой сокращенную версию <MyComponent index={index}/>

Вы никогда не обновляете свою index переменную, вы просто присваиваете 1 indx переменной, которая никогда не изменяется. Что вам нужно, так это обновить ваше состояние и таким образом увеличить вашу indx переменную и поместить ваше значение в массив при setState обратном вызове, но я рекомендую вам использовать текущий элемент массива index в вашем forEach цикле, поскольку это лучший способ сделать то, что вы хотите :

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