Карта на два массива и отображать данные в одной таблице?

Question

Допустим, у меня есть два свойства состояния в виде массива, например:

constructor(props) {
    super(props);
    this.state = {
            fullNames: [],
            salaryInfo: []
        }}

... и т. Д. (Много другого кода, где я получаю реквизиты, делаю ajax-запросы)

То, что я пытаюсь сделать, это перебрать эти 2 массива, которые у меня есть в моем состоянии, и отобразить их внутри одной таблицы .

Например, легко сделать что-то вроде этого:

const employeesFormated = fullNames
        .map(item => {
        return (
        <tr>
            <td>{item}</td>
        </tr>

const salariesFormated = salaryInfo
        .map(item => {
        return (
        <tr>
            <td>{item}</td>
        </tr>

... и затем отобразил его внутри тела таблицы JSX:

                   <table>
                       <thead>
                        <tr>
                            <th>Employee name</th>                        
                        </tr>
                        </thead>
                        <tbody>
                            {employeesFormated}
                        </tbody>
                    </table>

... и то же самое можно сделать для массива / таблицы окладов. И с некоторыми дополнительными трюками CSS, возможно, заставить все это работать с двумя разными таблицами, расположенными в нужных местах, но мне было интересно, возможно ли отобразить обе и отобразить их в одной таблице с соответствующими данными, что означает =>

Сотрудник A === Зарплата A

Answer 1

Возможно, было бы проще, если бы состояние было массивом объектов с зарплатой и именем в качестве ключей, но если вы знаете, что и fullNames, и зарплаты имеют одинаковую длину, и индексы соответствуют друг другу (то есть зарплата по индексу i соответствует имени в индексе i), я думаю, вы можете получить к ним доступ по индексу.

const employeeTable = this.fullNames
        .map((item, idx) => {
        return (
        <tr>
            <td>{item}</td>
            <td>{this.state.salaryInfo[idx]}</td>
        </tr>
        )
        })  

Кроме того, когда вы выполняете рендеринг из массивов, React ожидает, что вы получите уникальную ключевую опору, чтобы можно было отслеживать элементы DOM. Он вставит его для вас на основе индекса, если вы его не предоставите, но это не рекомендуется.