Функция React map возвращает одно и то же изображение при отображении случайно сгенерированного URL-адреса изображения
Я сопоставляю простой массив данных членов команды. URL-адрес изображения в данных представляет собой случайно сгенерированное изображение кошки. Моя проблема в том, что когда я сопоставляю массив членов команды, изображение всех членов одинаково. Каждый раз, когда я обновляю, они все меняются на другое изображение, но не на разные для каждого участника.
Остальные данные работают нормально. Как я могу решить эту проблему?
Пример данных:
[
{
"name": "Jessika",
"role": "Interaction Design",
"location": "berlin",
"image": "https://loremflickr.com/640/480/cat",
"tags": [
"salmon",
"red"
]
},
{
"name": "Kyra",
"role": "Project Manager",
"location": "amsterdam",
"image": "https://loremflickr.com/640/480/cat",
"tags": [
"white",
"gold"
]
},
Мой код:
<div className = "grid-item">
{response && (
<div className = "card">
{response.map((member: any) => {
return (
<div key = {member.name} className = "card__container">
<div className = "card-image">
<img src = {member.image} alt = "Team member" />
</div>
<div className = "card-content">
<p>{member.name}</p>
</div>
</div>
);
})}
</div>
)}
</div>
Я попытался сопоставить свой ответ и отобразить данные в моем jsx. Он отлично работает, но изображение не дает уникального изображения для каждого члена команды.
const { useState } = React;
const Example = () => {
const response = [
{
name: "Jessika",
role: "Interaction Design",
location: "berlin",
image: "https://loremflickr.com/640/480/cat",
tags: ["salmon", "red"],
},
{
name: "Kyra",
role: "Project Manager",
location: "amsterdam",
image: "https://loremflickr.com/640/480/cat",
tags: ["white", "gold"],
},
];
return (
<div className = "grid-item">
{response && (
<div className = "card">
{response.map((member/*: any*/) => {
return (
<div key = {member.name} className = "card__container">
<div className = "card-image">
<img src = {member.image} alt = "Team member" />
</div>
<div className = "card-content">
<p>{member.name}</p>
</div>
</div>
);
})}
</div>
)}
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);<div id = "root"></div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>@Spikatrix Я понимаю, но это конечная точка, которую мне дали для задания.
В задании говорится, что все изображения должны быть уникальными?
@Spikatrix Нет, но мне это не понравилось, и должно было быть решение :)
Это было бы чрезмерной инженерией. Лично я бы не стал этого делать. Я полагаю, что они будут смотреть на все в целом, а не проверять, уникальны ли изображения.
@MeesGoudbeek - Если это для задания, и они дали вам этот URL-адрес, вы можете использовать разные URL-адреса с одного и того же сервера и включить в код примечание, объясняющее, почему (вместо того, чтобы делать то, что в моем ответе, что добавляет ненужные сложности в код, если вам на самом деле не нужны одинаковые URL-адреса). Нравится https://loremflickr.com/640/480/cat, https://loremflickr.com/640/480/dog, https://loremflickr.com/640/480/giraffe...
@MeesGoudbeek - Или даже просто жестко закодированные https://loremflickr.com/640/480/cat?1, https://loremflickr.com/640/480/cat?2, https://loremflickr.com/640/480/cat?3 и т. д., опять же с примечанием, почему.
Спасибо вам обоим за отзыв! Посмотрю еще раз и посмотрю, какой подход лучше. Я обязательно добавлю примечание, объясняющее выбор, который я сделал.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Поскольку URL-адреса одинаковы, браузер может повторно использовать предыдущий ответ, когда два запроса выполняются почти в одно и то же время. Чтобы предотвратить это, добавьте строку запроса, чтобы сделать их уникальными, чтобы браузер не использовал ответ повторно:
<img src = {member.image + "?" + member.name} alt = "Team member" />
const { useState } = React;
const Example = () => {
const response = [
{
name: "Jessika",
role: "Interaction Design",
location: "berlin",
image: "https://loremflickr.com/640/480/cat",
tags: ["salmon", "red"],
},
{
name: "Kyra",
role: "Project Manager",
location: "amsterdam",
image: "https://loremflickr.com/640/480/cat",
tags: ["white", "gold"],
},
];
return (
<div className = "grid-item">
{response && (
<div className = "card">
{response.map((member/*: any*/) => {
return (
<div key = {member.name} className = "card__container">
<div className = "card-image">
<img src = {member.image + "?" + member.name} alt = "Team member" />
</div>
<div className = "card-content">
<p>{member.name}</p>
</div>
</div>
);
})}
</div>
)}
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);<div id = "root"></div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>Я использовал там имя члена, но отправка этой информации на сервер изображений может оказаться неуместной. Это просто должно быть что-то уникальное для этого участника и, в идеале, не меняющееся со временем (в идеале, не случайное число, хотя, если изображение всегда предназначено для повторной загрузки, это будет нормально).
Или, возможно, индекс члена (поскольку это не ключ React):
{response.map((member/*: any*/, index/*: number*/) => {
return (
<div key = {member.name} className = "card__container">
<div className = "card-image">
<img src = {member.image + "?" + index} alt = "Team member" />
</div>
<div className = "card-content">
<p>{member.name}</p>
</div>
</div>
);
})}
const { useState } = React;
const Example = () => {
const response = [
{
name: "Jessika",
role: "Interaction Design",
location: "berlin",
image: "https://loremflickr.com/640/480/cat",
tags: ["salmon", "red"],
},
{
name: "Kyra",
role: "Project Manager",
location: "amsterdam",
image: "https://loremflickr.com/640/480/cat",
tags: ["white", "gold"],
},
];
return (
<div className = "grid-item">
{response && (
<div className = "card">
{response.map((member/*: any*/, index/*: number*/) => {
return (
<div key = {member.name} className = "card__container">
<div className = "card-image">
<img src = {member.image + "?" + index} alt = "Team member" />
</div>
<div className = "card-content">
<p>{member.name}</p>
</div>
</div>
);
})}
</div>
)}
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);<div id = "root"></div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>Если URL-адрес изображения может уже иметь строку запроса, вам понадобится & вместо ?. Вы можете сделать:
function appendUrlPart(url, part) {
const delim = url.includes("?") ? "&" : "?";
return url + delim + encodeURIComponent(part);
}
...тогда src = {appendUrlPart(member.image, index)}.
В комментарии вы сказали, что это для задания, и URL-адрес указан как часть задания. Если задание не предназначено для того, чтобы заставить вас решить эту самую проблему (то есть, если вы думаете, что инструктор просто выбросил URL-адрес, не приняв во внимание эту возможную проблему), вы можете просто использовать другие URL-адреса с этого сервера в данных «ответ», вместо добавления кода выше. Приведенный выше код решает проблему, но если это не настоящая проблема, вам не нужен лишний код в вашем решении. Возможно, просто используйте https://loremflickr.com/640/480/cat, https://loremflickr.com/640/480/dog, https://loremflickr.com/640/480/giraffe и т. д.; или даже просто https://loremflickr.com/640/480/cat?1, https://loremflickr.com/640/480/cat?2, https://loremflickr.com/640/480/cat?3 и т. д. Вместе с комментарием, объясняющим, почему вы это сделали.
Используйте реальные изображения, если вам нужны четкие результаты, а не генератор случайных изображений.