Не удается вернуть в разных строках объекты из массива с помощью map

#javascript #reactjs #dictionary

#javascript #reactjs #словарь

Вопрос:

У меня есть вопрос относительно «карты» с массивом и объектами.

Я пытаюсь отобразить в каждой строке таблицы имя и имя пользователя.

Я думаю, что есть что-то, что я неправильно понял с map, потому что я отображаю имя обоих пользователей в одной строке.

Должен ли я проходить через «для» массива users, чтобы сгенерировать одну строку для каждого пользователя?

  function DisplayUsersTable() {
        let users = [
            { id: 1, firstName: "John", lastName: "Connor" },
            { id: 2, firstName: "Geralt", lastName: "Rivia" }
        ]
        return (
            <table>
                <thead>
                    <tr>
                        <th> firstName </th>
                        <th> lastName</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        {users.map((user, index) =>(<td key={index}>{user.lastName}</td>))}
                    </tr>
                </tbody>
            </table>
        )
    }

Отображение:

    firstName    lastName
    Connor  Rivia

Спасибо!

1. «Должен ли я проходить через «for of» массива users, чтобы сгенерировать одну строку для каждого пользователя? » вам не нужно — вы можете просто использовать map для этого. Проблема в том, что вы генерируете по одному <td> для каждого пользователя с вашим текущим кодом. Похоже, вы хотите по одному <tr> для каждого.

2. Спасибо за ваш отзыв, все в порядке. Я неправильно понял, как работает map! Хорошего дня 🙂

Ответ №1:

Вы на самом деле неправильно поняли, что делает map и что делает ваш HTML. итак, ваша карта выполняет итерацию по заданному вами массиву и отображает каждый элемент массива так, как вы хотите, поэтому использование map заключается в переборе по массиву, чтобы вы могли получить доступ к одному элементу массива. HTML фактически позволяет вам управлять тем, как вы хотите распечатать свои данные. итак, проблема не в вашей карте, а в вашем HTML <td> .

1. Вы правы, я неправильно понял итерационную часть «map». Я просто изменил html, и он работает нормально. Я также провел два или три других теста, и я думаю, что понял, как это работает! Большое вам спасибо за ваше объяснение 🙂 Хорошего дня!

Ответ №2:

Теперь это работает:

 function ShowUserTable() {
        let users = [
            { firstName: "John", lastName: "Connor" },
            { firstName: "Geralt", lastName: "Rivia" },
            { firstName: "Nathan", lastName: "Drake" }
        ]
        return (
            <table>
                <thead>
                    <tr>
                        <th> firstName </th>
                        <th> lastName</th>
                    </tr>
                </thead>
                <tbody>
    
                        {users.map((user, index) =>(
                             <tr key={index}>
                                 <td>{user.firstName} </td>
                                 <td>{user.lastName} </td>
                            </tr>
                        ))}
    
    
                    
                </tbody>
            </table>
        )
    }