Question

如何使用其他数组更新对象数组

2021-02-23

66

javascript arrays 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 有人可以帮我吗？

Answer 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);
}

解释： 您正在循环遍历 data 数组中的所有 items ，然后如果您的 array (fruits,nuts or veg) 包含该值，则您只需返回一个新的 item 对象，其中 checked 设置为 true ，否则将 checked 设置为 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 或 type ，基于此，您只能更改那些 kind/type 与从 单选按钮 中选择的选项匹配的项目。

Answer 2

你喜欢这个吗？

data.filter(item => {
 if(fruits.includes(item.name)){
  item.checked = true;
 }
 return data
})

xflorin94

2021-02-23