如何对数组中的随机元素编号？

Question

In my application, I randomized the sequence of specific views. However, I have a problem with displaying the correct sequence number of view.

So, the first view should get number 1, second view number 2, etc.. Since they get shuffled in an array, I have no idea how to access the order number of the view beforehand. The correct number should then get passed as a prop to the specific view component in order to display it.

 shuffle(arr) {
    var i, j, temp;
    for (i = arr.length - 1; i > 0; i--) {
      j = Math.floor(Math.random() * (i + 1));
      temp = arr[i];
      arr[i] = arr[j];
      arr[j] = temp;
    }
    return arr;
  };

 constructor() {
      const componentArray = [<Tasks incrementSequenceCounter={this.incrementSequenceCounter} count={this.state.count} />, <APM incrementSequenceCounter={this.incrementSequenceCounter} count={this.state.count} />, <ICAA incrementSequenceCounter={this.incrementSequenceCounter} count={this.state.count} />]

      const shuffledArray = this.shuffle(componentArray);

      this.state.shuffledArray = shuffledArray;
    }

Somehow the component should be aware of its index in the array, but I don't know where to start.

Answer 1

Your array's element should be wrapped in an object before shuffling:

const componentArray = [
  {
    index: 0,
    component: <MyComponent />
  }

];

You could create it from your array with a simple map() :

const indexArray = componentArray.map((el, i) => ({ index: i, component: el });

Then you can safely shuffle your indexArray

Answer 2

Firstly I don't like the idea of initialising components in the constructor. That basically makes them static, but that may be what you're after. Here's my attempt:

constructor() {
      const componentArray = [ 
          {
             type: Tasks, 
             props: { 
                 incrementSequenceCounter: this.incrementSequenceCounter,  
                 count: this.state.count 
               }
          }, 
          {
             type: APM, 
             props: { 
                 incrementSequenceCounter: this.incrementSequenceCounter,  
                 count: this.state.count 
               }
          },
          {
             type: ICAA, 
             props: { 
                 incrementSequenceCounter: this.incrementSequenceCounter,  
                 count: this.state.count 
               }
          }


      const shuffledArray = this.shuffle(componentArray);

      this.state.shuffledArray = shuffledArray.map(
            (componentConstructor, index) => React.createElement(componentConstructor.type, { ...componentConstructor.props, index })
     );
}

The basic idea is to construct them after you've determined the order. The obvious disadvantage here is that since this is happening in the constructor any state changes in the parent component are not reflected in these children components. If you don't want that then this should be moved in render and/or componentDidMount/Update

Note: Based on other answers I need to clarify that in my understanding the question is how to pass the index the component ends up in after shuffling to the component itself. This differs from how others have answered so if I am understanding it incorrectly let me know