当我对我的对象进行动态解构时，React 返回一个意外的标记错误

Question

我正在用 React 中的 onChange 事件更新输入字段。

const handleUpdateText = (id, name, text) => {
  const newItems = items.map( item => {
  if (item.id === id) {
    return {...item, [menuLang][name]:text } // <-- error here at ][
  }
  return item;
  } )

  setItems(newItems);
}

name and text and name 属性和目标输入字段的值。

menuLang 是一个状态变量（字符串，例如“en”）。

项目是这样的：

{
  id: 1,
  type: "menuitem",
  isVisible: true,
  en: {
    name: "Salad",
    desc: "Fresh, seasonal ingredients",
  },
  price: "10",
},

没有动态解构它工作正常：

    const newItem = {...item}
    newItem[menuLang][name] = text;
    return newItem;
    // instead of: return {...item, [menuLang][name]:text }

有什么想法吗？

Answer 1

我不认为这里有错误，但我也不认为你想做的事可以通过解构实现——我认为你必须沿着第二个例子的路线走下去。

Answer 2

使用computed property name

let item={id:1,type:"menuitem",isVisible:!0,en:{name:"Salad",desc:"Fresh, seasonal ingredients"},price:"10"};

console.log(item)

let name = 'name'

let text = "Orange"

let menuLang = 'en'

item = {...item,[menuLang]:{...item[menuLang],[name]:text}}

console.log(item)

Answer 3

const items = [{id:12,name: 'dj' }];
const handleUpdateText = (id = 12, name='ann', text='sample') => {
  const newItems = items.map((item) => {
const obj = {...item};
  if (item.id === id) {
    return {...obj, [menuLang]: {[name]:[text]}};
  }
  return obj;
  });
console.log('item', newItems);
};```

当我对我的对象进行动态解构时，React 返回一个意外的标记错误

React comes back with an unexpected token error when I do a dynamic destructuring of my object

javascript

reactjs

dynamic

destructuring