.map в React.js
У меня есть этот файл CarsData.js (содержание некоторой информации)
const CarsData = [
{ id: "car_01", image: imageToyota, title: "Toyota", type: "SUV" },
{ id: "car_02", image: imageAudi, title: "Audi", type: "SUV" },
{ id: "car_03", image: imageNissan, title: "Nissan", type: "CAR" },
{ id: "car_04", image: imageKia, title: "Kia", type: "TRUCK" }
]
export default CarsData
и я отображаю весь код в этом разделе CardsCars.js
const CardsCars = () => {
const card = CarsData.map(car => {
return <CardCar image = {car.image} title = {car.title} type = {car.type}/>
})
return (
<>
<div className='row'>
{card} //display all the info in CarsData
</div>
</>
)
}
export default CardsCars
Как я могу отображать только 2 информации из CarsData.js (а не 4 информации)
@wonderflame первые два и случайные?
@NazarKardan, какие две из четырех вещей вы хотите отобразить? Ответ зависит. Например, CarsData.slice(0, n).map(...) даст вам первые n элементы массива, но если вам не нужны только первые два, вам нужно что-то еще.
"@wonderflame первые два и случайные?" я не понял твоего ответа
@wonderflame Я имею в виду, как я могу отобразить первое и второе? а если я хочу отображать только 2 случайных информации?
с помощью .slice(). Это не имеет ничего общего с React, а просто с тем, «как мне использовать массивы JS», на который ответом является «множество встроенных удобных функций, дайте им прочитать».
Вы можете отобразить первые два, как упомянул @JaredSmith: CarsData.slice(0,2).map(...)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете использовать метод «slice()», который возвращает выбранные элементы в массиве как новый массив. Затем вы можете запустить "map()", чтобы показать данные.
CarsData.slice(0,2).map((car) => (<CardCar image = {car.image} title = {car.title} type = {car.type}/>));
В этом случае будут отображаться первые 2 информации.
Спасибо. Это работает. Могу ли я отобразить 2 случайных сообщения?
@NazarKardan Я рассказал об этом случае в своем ответе
Если вам нужны n случайные числа, вы можете рассмотреть следующий подход:
const randomNElements = (arr = [], n = 2) => {
const copy = [...arr];
const result = [];
const length = Math.min(n, copy.length);
for (let i = 0; i < length; i++) {
const [randomElement] = copy.splice(Math.floor(Math.random() * copy.length), 1);
result.push(randomElement);
}
return result;
};
Он не изменяет исходный массив и не сохраняет порядок выбранных элементов из исходного массива.
Вам нужны только первые два или любые два случайных?