使用参数变量作为键来设置嵌套对象的状态的函数

时间:2020-10-09 12:44:15

标签: reactjs typescript setstate

我想用功能updateDatas更新对象状态。我传递了key(可能是subKeyvalue作为此函数的参数。

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)

1 个答案:

答案 0 :(得分: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,而类型为subKeykeysof Item)。 / p>

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。您应该寻找解决此问题的方法。