javascript - 使用“未知”数据更新部分界面

Question

React 和 Typescript 中的应用程序。

我有这样的数据结构

export interface data {
  name1: ConfigurationVariable,
  name2: ConfigurationVariable,
  name3: ConfigurationVariable,
  name4: ConfigurationVariable,
}

和

export interface ConfigurationVariable {
  id: string;
  value: any;
  name: string;
  type: DataTypes;
  default: DataType;
  min: number | string | boolean;
  max: DataType;
  storage: StorageType; 
}

在我的应用程序中，我有一个data类型的 useState 变量。

const [CVData, setCVData] = useState<data>(CV);

我的应用程序接收到这样的 websocket 消息：{name: any, value: any}。例如 {name: name2, value: 100}

我应该如何在我的数据状态中更新正确的值，在这种情况下是name2的值

有没有更好的方法来存储我的值？他们会更新很多。

谢谢！

标签： javascriptreactjstypescript

Answer 1

const {name, ...rest }  = datafromWebSocket
setCVData(cvData=>({...cvData, [name]: {...cvData[name], ...rest}}))

数据结构似乎是正确的。使用这种结构进行更新应该很容易。如果它不起作用或我错过了什么，请告诉我。