Генерация таблицы из массива объектов - PullRequest
Новая
       5

Генерация таблицы из массива объектов

0 голосов
/ 26 сентября 2018

Если у меня есть такое состояние: 

 state = {
    Data: [
      {
          inputArr: [1, 2, 3],

      },
      {
         inputArr: [1, 2, 3],

      },
      {
          inputArr: [1, 2, 3],

      }
    ]
  };

, и я хочу создать таблицу из входного Arr, чтобы у меня было 3 строки по 3 столбца, и все будет в порядке, 123,123,123

Я думал о двойной карте, но она не работает, есть ли лучший способ? 

const test=this.state.data.map( (val)=>{
   val.map( (val2)=>{
 <tr>
    return (
  <th> val2 </th>
      )
    }
 </tr>
}

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Я вижу, вы уже приняли ответ, но я хотел бы уточнить, что не так с вашим кодом. 

render() {
  const test=this.state.Data.map((val, index1)=>(
    <tr key={index1}>
      {val.inputArr.map( (val2, index2) => <td key={index2}>{val2}</td> )}
    </tr>
  ))

  return <table>{test}</table>;
}

Демонстрация Fiddle

  • JavaScript чувствителен к регистру, ваше свойство Data не data.
  • Будьте осторожны, используя правильные {} или () с функциями стрелок.Использование {} означает, что вы можете сделать несколько заявлений и явно что-то вернуть.Использование () автоматически возвращает выражение.
  • Чтобы вывести значение в React, оберните его в {}, как я это делал с {val2}
  • Учитывая вашу структуру данных, вы должны использоватьinputarr свойство при доступе к внутреннему массиву.
  • Использование key в списках элементов.Вы можете прочитать о ключах в реакции здесь .
0 голосов
/ 26 сентября 2018

Вы должны иметь вложенную карту и возвращать элементы JSX от обоих из них 

const test= this.state.Data.map((val, index)=>{
     return (
        <tr key={index}>
           {val.inputArr.map((val2)=>{
                return (
                  <th key={val2}>{val2}</th>
                )
            })}
        </tr>
     )
}

Вам также необходимо предоставить ключ для элементов 

class App extends React.Component {
  state = {
    Data: [
      {
          inputArr: [1, 2, 3],

      },
      {
         inputArr: [1, 2, 3],

      },
      {
          inputArr: [1, 2, 3],

      }
    ]
  };

  render() {
    const test= this.state.Data.map((val, index)=>{
         return (
            <tr key={index}>
               {val.inputArr.map((val2)=>{
                    return (
                      <th key={val2}>{val2}</th>
                    )
                })}
            </tr>
         )
    })
    return <div>{test}</div>
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));
<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="app"/>
...