#javascript #arrays #reactjs
#javascript #массивы #reactjs
Вопрос:
const [data , setData] = useState([
{
id:1,
name : "Walnuts",
checked:false
},
{
id:2,
name:"cashew nut",
checked : false,
},
{
id:3,
name:"pista",
checked : false,
},
{
id:4,
name : "almond",
checked:false
},
{
id:5,
name:"beans",
checked : false,
},
{
id:6,
name:"banana",
checked : false,
},
{
id:7,
name:"apple",
checked : false,
},
{
id:8,
name:"mango",
checked : false,
},
{
id:9,
name:"potato",
checked : false,
},
{
id:10,
name:"carrot",
checked : false,
},
])
У меня есть вышеуказанные данные и массивы
const fruits = ["banana","apple","mango"]
const nuts = ["walnuts","pista","cashew nut"]
const veg = ["beans","carrot","potato"]
и у меня есть 3 переключателя, такие как фрукты, орехи и овощи.
Если пользователь выбирает фрукты, все фрукты с именем в массиве фруктов должны быть проверены, равно true в массиве данных объектов кто-нибудь может мне помочь с этим?
Комментарии:
1. Попробуйте отфильтровать свой массив
2. Я бы предложил добавить a
type
в ваш массив вместо того, чтобы поддерживать несколько массивов.{ id:4, name : "almond", checked: false, type: 'nut' }
а затем добавьте фильтр по типу
Ответ №1:
Один из подходов может быть следующим :-
function updateData(array)
{
const newData = data.map((item)=>{
if(array.includes(item.name))
return {...item,checked:true}
else
return {...item,checked:false};
})
setData(newData);
}
Объяснение: Вы перебираете все items
в своем data
массиве, а затем, если ваши array
(фрукты, орехи или овощи) включают это значение, вы просто возвращаете новый item
объект с checked
set to true
else с checked
set to false
. Результирующий массив будет новым, поскольку вы используете .map
, и теперь вы можете установить его в качестве своего состояния.
Хотя это менее эффективно из-за сложности O (длина массива данных * длина массива фруктов). Лучшим подходом может быть наличие Set
fruits
того, где вы проверяете вот так :-
function updateData(set)
{
const newData = data.map((item)=>{
if(set.has(item.name)){
return {...item,checked:true}
else
return {...item,checked:false};
})
setData(newData);
}
Еще лучшим подходом может быть изменение существующей структуры данных вашего data
массива, включив в нее еще одно свойство, подобное kind
or type
, на основе которого вы можете изменять только те элементы, которые kind/type
соответствуют выбранной опции из переключателя.
Ответ №2:
Вы так считаете?
data.filter(item => {
if(fruits.includes(item.name)){
item.checked = true;
}
return data
})