как обновить массив объектов другим массивом

#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
})