Reactjs 针对一个特定的数据块并更新其状态

如果我有一段数据，并将其存储在如下状态：

interface DataType {[key: string]: string;}

const [data, setData] = React.useState<DataType>({
{
    "Widget1": "weather",
    "Widget2": "timer",
    "Widget3": "clock"
});

同样适用于

Widget2

等。更好的做法是为所有人提供一个功能，如下所示：

const widgetHandler = (widget: string, widgetNr: number ) => {
const updatedData = ???;
setData(updatedData);
}

如何针对一个特定值并更新其状态

---

感谢您的帮助。

您可以使用状态更新程序回调，并将小部件编号传递给更新程序函数，如

widget2

等

const widgetHandler = (widget: string, widgetNr: number ) => {
   // widgetNr should be of the format Widget1, Widget2 and so on

    setData(previousData => ({
         ...previousData,   // spreading all the previous values
         [widgetNr]: widget // updating the required value
    }));
}

---

可以使用动态选择属性名称。这将允许您将小部件编号传递到

widgetHandler

，并更新状态

const widgetHandler = (widget: string, widgetNr: number ) => {
  // const someData = ???;
  setData({
    ...data,
    ['Widget' + widgetNr.toString()]: someData 
  });
}

---

太神了谢谢

const widgetHandler = (widget: string, widgetNr: number ) => {
  // const someData = ???;
  setData({
    ...data,
    ['Widget' + widgetNr.toString()]: someData 
  });
}