javascript - 当我对我的对象进行动态解构时，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);
}

名称和文本以及目标输入字段的名称属性和值。

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 }

任何想法有什么错误？

标签： javascriptreactjsdynamicdestructuring

Answer 1

使用计算属性名称

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)