react How to change the value of object in react array

Question

development enviroment
・ react
・ typescript

state to update the member object in the state array.
I implemented is as follows.　　 However, I get the following error and cannot implement it well.

errormessage

Type'(IMemberLavel | {Language: IMember;}) []'cannot be assigned to type'IMemberLavel []'

interface IMemberLevel {
  member: IMember;
  level: ILevel;
}

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

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

interface ISearch {
  name: string;
  age: number;
  groups?: IGroups[];
  memberLavel: IMemberLevel[];
}

interface IState {
  searchState:　ISearch;
  text: string,
  display: boolean
}

const Index: FC = () => {
  const [state, setState] = useState<IState>({
    searchState: initialSearch,
    text: '',
    display: boolean
  });

  const onClickMember = (member: IMember) => {
    setState({
      ...state,
      searchState: {
        ...state.searchState,
        memberLavel: [...state.searchState., {  member : member }],
     },
  });
  };

Postscript

const inithiaｌMemberLavel: IMemberLevel = {
  member: { id: 0, name: '' },
  level: { id: 0, name: '' },
};

const initialSearch: ISearch = {
  name: '',
  age: 0,
  groups: [],
  memberLavel: inithiaｌMemberLavel[]
}

This has some syntax errors. Can you fix them?

mbdavis
– mbdavis

2020-10-14 14:47:34 +00:00
Commented Oct 14, 2020 at 14:47 — mbdavis
– mbdavis, Commented Oct 14, 2020 at 14:47
I fixed the above code.

TO YUU
– TO YUU

2020-10-14 15:16:00 +00:00
Commented Oct 14, 2020 at 15:16 — TO YUU
– TO YUU, Commented Oct 14, 2020 at 15:16

diedu · Accepted Answer · 2020-10-14 15:54:03Z

1

The new member you're adding to memberLavel is missing level property, either add the property

setState({
  ...state,
  searchState: {
    ...state.searchState,
    memberLavel: [
      ...state.searchState.memberLavel,
      { member, level: { id: /* some number */, name: /* some name */ } },
    ],
  },
});

or set it as optional in IMemberLevel interface

interface IMemberLevel {
  member: IMember;
  level?: ILevel;
}

answered Oct 14, 2020 at 15:54

diedu

20.9k4 gold badges40 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

TO YUU Over a year ago

thank you!!! I implemented it in the above way. However, the initial value was set to [] and it could not be set in detail.

TO YUU Over a year ago

I set the initial value as　 memberLavel: inithialMemberLavel [],　 but I got the error Parsing error: An element access expression should take an argument.eslint.

diedu Over a year ago

@TOYUU you're just putting the [] wrong, this way you'd initialize it with an array with 1 item memberLavel: [inithiaｌMemberLavel]

TO YUU Over a year ago

thank you!! {member, level: {id: / * some number * /, name: / * some name * /}}, member has no value in the scope of the abbreviation property'member'. Declare a value or specify an initializer. I get a ts (18004) error

diedu Over a year ago

try putting back {member: member}

|

Collectives™ on Stack Overflow

react How to change the value of object in react array

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related