Проблема:

Сегодня мы рассмотрим, что делать, когда у вас есть массив элементов для сопоставления, но вы хотите сначала сделать что-то с каждым из них.

Пример:

Я делаю React-приложение под названием Swars на основе Star Wars API.

Между прочим, это отличный API, очень полезный и интересный для обучения. Вот версия, которую я сделал 6 месяцев назад на PHP. Я только что проверил, и API не работает, поэтому ни один пример не работает.

… но для этого они нам не нужны…

Как вы знаете, записи проходят так:

{
    "name": "Luke Skywalker",
    "height": "172",
    "mass": "77",
    "hair_color": "blond",
    "skin_color": "fair",
    "eye_color": "blue",
    "birth_year": "19BBY",
    "gender": "male",
    "homeworld": "http://swapi.co/api/planets/1/",
    "films": [
        "http://swapi.co/api/films/2/",
        "http://swapi.co/api/films/6/",
        "http://swapi.co/api/films/3/",
        "http://swapi.co/api/films/1/",
        "http://swapi.co/api/films/7/"
    ],
    "species": [
        "http://swapi.co/api/species/1/"
    ],
    "vehicles": [
        "http://swapi.co/api/vehicles/14/",
        "http://swapi.co/api/vehicles/30/"
    ],
    "starships": [
        "http://swapi.co/api/starships/12/",
        "http://swapi.co/api/starships/22/"
    ],
    "created": "2014-12-09T13:50:51.644000Z",
    "edited": "2014-12-20T21:17:56.891000Z",
    "url": "http://swapi.co/api/people/1/"
}

Вы можете видеть, что запись не имеет собственного поля идентификатора. Тем не менее, у него есть поле «url», и к URL-адресу в самом конце поля прикреплено число, которое, как мы с вами можем сказать, является идентификационным номером!

Что мы пытаемся сделать:

Мы хотим, чтобы когда пользователь нажимал «Люди», он отображал маленькие карточки данных всех людей. Затем, когда вы нажмете на одну из этих карт, вы получите конкретную информацию об этом персонаже.

Но нам нужно получить идентификатор персонажа, чтобы мы могли получить его в нашем собственном приложении. Это поле «url» просто предоставляет ссылку на данные этого персонажа, нам нужен только идентификатор, поэтому мы можем вызвать страницу в нашем приложении, например «showCharacter/1», и тогда она вызовет данные персонажа.

Как мы это делали:

Когда пользователь нажимает «Люди», он попадает на страницу, где мы просто отображаем все символы в API:

И мы сопоставили их так:

{this.props.ship.people && this.props.ship.people.map(person => 
<Link to={{ "pathname": `/people/` }}> 
<span>{person.name}</span>
<img src={`${person.imgPath}`} />
</Link>
)}

Вы можете видеть там, где «имя пути» установлено на /people , что означает, что независимо от того, какую из этих маленьких карточек щелкнет пользователь, он всегда вернется на эту страницу.

Это потому, что у нас нет определенного идентификатора для отправки на другую страницу, чтобы просто отобразить этого пользователя.

Что мы должны были сделать:

Оказывается, пока вы делаете карту в React, вы можете превратить весь этот процесс в функцию и делать с ней все, что хотите, а затем возвращать результаты.

…гадзуки…

Нравится:

{this.props.ship.people && this.props.ship.people.map(person=> {
let idStr = person.url.split('/');
let personID = idStr[5];
return (
<Link to={{ "pathname": `/people/${personID}` }}> 
<img src={`${person.imgPath'}`}/>
</Link>
)
})}

И все, что я действительно сделал, это добавил фигурную скобку и «return(» перед ней и «)}» в конце.

Затем я мог бы использовать пробел между открывающей фигурной скобкой и ключевым словом «return», чтобы делать любые махинации, которые я хотел.

В этом случае я брал URL-адрес каждой записи по мере ее поступления, затем разбивал ее на массив, и шестым элементом в массиве [5] был тот, у которого был идентификатор!

Теперь вы заметили, как, когда они нажимают на нее, на этот раз они переходят в какое-нибудь крутое место?

<Link to={{ "pathname": `/people/${personID}` }}>

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

Это все. Иди домой.

Теперь вы можете использовать эту технику всякий раз, когда хотите манипулировать элементами массива во время их отображения. Это могут быть математические функции, форматирование или что-то в этом роде, но вы готовы!