以参数变量为键设置嵌套对象状态的函数

Question

我想用函数updateDatas 更新对象状态。我将key、可能的subKey 和value 作为该函数的参数传递。

interface Datas {
  code: number;
  item1: Item;
}

interface Item {
  id: number;
  name: string;
}

const [datas, setDatas] = useState({
  code: 42,
  item1: {
    id: 1,
    name: 'foo'
  }
});

function updateDatas(key: string, subKey: string, value: any) {
  if (subKey) {
    setDatas({...datas, key: {...datas.key, subKey: value}});
  } else {
    setDatas({...datas, key: value});
  }
}

updateDatas('code', 23);
updateDatas('item1', 'name', 'bar');

但它不起作用，我有这个 Typescript 错误：

'{ key: any; 类型的参数代码：号码； item1：项目； }' 不可分配给“SetStateAction”类型的参数。 对象字面量只能指定已知属性，而 'key' 不存在于类型 'SetStateAction'.ts(2345)

Answer 1

您正在尝试更新密钥subKey，而不是使用变量subKey 作为字符串的密钥。与key 相同。执行以下操作：

function updateDatas(key: string, subKey: string, value: any) {
  if (subKey) {
    setDatas({...datas, [key]: {...datas[key] as Item, [subKey]: value}});
  } else {
    setDatas({...datas, [key]: value});
  }
}

无论如何，您应该在接口之间存在一些不一致，因为key 的类型是string 而不是keysof Datas，并且与subKey (keysof Item) 相同。

function updateDatas(key: keysof Datas, subKey: keysof Item, value: any) {
  if (subKey) {
    setDatas({...datas, [key]: {...datas[key], [subKey]: value}});
  } else {
    setDatas({...datas, [key]: value});
  }
}

编辑：与值相同，因为在您的界面中，您希望该值是其他东西而不是any。您应该寻找解决方法。