Question

在 React 中我有一个状态：

const [selecteditems, setSelectedItems] = useState()

在表单提交时，我有一个看起来像这样的对象 {items: {item1: true, item2: true, item3: false}} 我需要将此对象转换为如下所示的对象数组：[{ name: 'item1', price: ''}, {name: 'item2', price: ''}] 与 setSelectedItems

一起使用

然后我希望能够使用 setSelectedItems 更新单个商品的价格。我将如何实现这一目标？

总结一下，首先我需要将一个对象转换为一个对象数组，然后我需要分别更新对象数组中的各个价格值。

Answer 1

您可以使用 filter 和 map。要更新对象，可以使用 find。

const obj = {items: {item1: true, item2: true, item3: false}};
const res = Object.entries(obj.items).filter(([k,v]) => v)
    .map(([k]) => ({name: k, price: ''}));
console.log(res);
//update
let name = 'item2';
res.find(x => x.name === name).price = '$10';
console.log(res);

Answer 2

    const items = {items: {item1: true, item2: true, item3: false}}
    const itemArray = [];
    Object.keys(items.items).forEach((key) => {
      if (items.items[key])
        itemArray.push({
          name: key,
          price: '',
        });
    });

    setSelectedItems(itemArrary);

更新价格

    const name = 'item1';

    const _itemArray = [...itemArray];
    const index = _itemArray.findIndex(item => item.name === name);

    if (index !== -1) {
        _itemArray[index].price = '$100';
        setSelectedItems(_itemArray);
    }

Answer 3

或者您也可以使用 reduce()。

const value = {items: {item1: true, item2: true, item3: false}} 
// [{ name: 'item1', price: ''}, {name: 'item2', price''}]


const res = Object.entries(value.items).reduce((acc, [k,v]) => {
  return v ? acc.concat({ name: k, price: '' }) : acc;
},[])

console.log(res);

Answer 4

你可以这样做

const price = [{ name: 'item1', price: ''}, {name: 'item2', price: ''}]

const newPrice = {
name: "item1",
price: "$1000"
}

const results = price.map((x) => x.name === "item1" ? newPrice : x)
console.log(results)

将对象转换为对象值数组

4 个答案: