在 reactJs 中使用 useState 更改嵌套对象中的值

Question

I'm trying to change the value of an object property nested in an array nested inside an object using useState.

State is set as follows:

  const [groupState, setGroupState] = useState({
    groupId: uuidv4(),
    content: [{ rowId: uuidv4(), field: '', from: '', to: '' }],
  });

I'm trying to change the value of the 'field' property. If I add an entire 'dummy' object with the required value in the required property then it works:

setGroupState({
  ...groupState,
  content: groupState.content.map((item) => {
    if (item.rowId === rowId) {
      return (item = { rowId: uuidv4(), field: value, from: '', to: '' });
    }
  }),
});

However, I need to just update the specific property value, not the whole object. My latest effort is the following:

setGroupState({
  ...groupState,
  content: groupState.content.map((item) => {
    if (item.rowId === rowId) {
      return (item.field = value);
    }
  }),
});

Which returns the error: "Cannot create property 'field' on string 'user'" - I'm doing somethign wrong but I can't work out what.

Answer 1

Try destructing your item object:

setGroupState({
  ...groupState,
  content: groupState.content.map((item) => ({
    ...item,
    field: item.rowId === rowId ? value : item.field,
  })),
});

// Without explicit return
setGroupState({
  ...groupState,
  content: groupState.content.map((item) => {
    return { ...item, field: item.rowId === rowId ? value : item.field };
  }),
});

Answer 2

Okay, got it, thanks Dennis Vash - just needed a little change:

setGroupState({
  ...groupState,
  content: groupState.content.map((item) => ({
    ...item,
    field: item.rowId === rowId ? value : item.field,
  })),