Допустим, ваш работодатель хотел составить список имен, возраста и даты рождения людей по какой-то странной конкретной причине.
Думаешь, блин, я даже вложенный массив сделать не могу. Шучу, ты лучший кодер в мире.
Вы можете поместить это в таблицу, да, но какой метод лучше использовать вместо цикла for для этих утомительных вложенных массивов, которые потребуются для просмотра данных?
Если вы подумали о функции map(), то вы правы.
Во-первых, для начала вам понадобится массив для хранения этих специальных данных.
Сначала мы будем перебирать заголовки, а затем данные!
const headers= ["name", "age" ,"dob"]; const data =[ ["Makayla","20","04/03/2002"], ["Xun","33","04/03/1988"], ];
Затем нам нужно создать удивительный компонент класса! Вы можете назвать это как хотите. Просто убедитесь, что у него есть столица…
import React from "react"; export class Database extends React.Component { render() { return ( <span> {this.props.headers.map((title, idx) => ( <h3 key={idx}>{title}</h3> ))} {this.props.data.map((row, idx) => ( <h3 key={idx}>{row}</h3> ))} </span> ); } }
Обратите внимание на idx?
Они нужны нам, чтобы избежать этой ошибки:
должен иметь уникальный ключевой реквизит.
Проверьте метод рендеринга Database
. См. https://reactjs.org/link/warning-keys для получения дополнительной информации. h3 в базе данных (http://localhost:3000/static/js/bundle.js:327:1) в div в приложении
React любит организацию, я имею в виду, что это единственная причина, по которой он был создан, верно?
Поэтому нам нужно добавить уникальные идентификаторы в заголовок каждой таблицы.
Затем вам нужно добавить данные в тег вашего компонента, где бы вы его ни вызывали…
<Database headers={headers} data={data}></Database>
Надеюсь, это поможет.
Это просто и легко, но ошибки всегда возможны! Важно то, что мы учимся у них.