Проход по 2D массиву в React - PullRequest
Новая
       12

Проход по 2D массиву в React

0 голосов
/ 29 августа 2018

Я новичок в React, поэтому я хотел бы спросить вас, есть ли способ перебрать 2D-массив в React.

Пример двумерного массива: 

const db = {
    "1": {
        "1": "aaa",
        "2": "bbb",
        "3": "ccc"
    },            
    "two": {
        "1": "ddd",
        "2": "eee"
    }
};

Мой псевдокод: 

for(i = 1; i < db.lenght; i++){
     for(j = 1; j < db[i].lenght; j++){
          console.log(db[i][j]);
     }
}

Но я не знаю, как отобразить его в React, например, в теге <ul>.

Ответы [ 4 ]

0 голосов
/ 29 августа 2018

В React обычно используются методы массива, такие как Array # map . В вашем коде компонента React, если outerArray был массивом массивов, вы можете обработать его следующим образом: 

return (
    <ul>
        {outerArray.map((innerArray) => (
            <li>
                {innerArray.map((item) => <li>{item}</li>)}
            </li>
        ))}
    </ul>
);
0 голосов
/ 29 августа 2018

Проще всего использовать Array.prototype.map() для циклического перемещения по массивам внутри jsx: 

render() {
    return (
        <ul>
            {db.map(entries => (
                <li>
                    <ul>
                        {entries.map(entry => (
                            <li>{entry}</li>
                        ))}
                    </ul>
                </li>
            ))}
        </ul>
   );
}
0 голосов
/ 29 августа 2018

Вы можете выполнить итерацию объекта db, как показано ниже, и отобразить его в списке. 

const db = {
  "1": {
    "1": "aaa",
    "2": "bbb",
    "3": "ccc"
  },
  two: {
    "1": "ddd",
    "2": "eee"
  }
};

function App() {
  return (
    <ul className="App">
      {Object.keys(db).map(keyOuter => {
        return Object.keys(db[keyOuter]).map(keyInner => {
          return (
            <li key={`${keyInner}-${keyOuter}`}>{db[keyOuter][keyInner]}</li>
          );
        });
      })}
    </ul>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="root"></div>
0 голосов
/ 29 августа 2018

Все просто. Возвратите такой список в вашем цикле: 

<li>{db[i][j]}</li>

myList() {
  let list = []
  for(i = 1; i < db.lenght; i++){
     for(j = 1; j < db[i].lenght; j++){
          console.log(db[i][j]);
       list.push(<li key={i+'-'+j}>{db[i][j]}</li>)
       // when rendering list of array elements, wee need unique key
     }
  }
  return list
}

render() {
  return <ul>{this.myList()}</ul>
}
...