reactjs - react如何改变react数组中对象的值

Question

开发环境
・反应
・打字稿

state 更新状态数组中的成员对象。
我的实现如下。但是，我收到以下错误并且无法很好地实现它。

错误信息

类型'(IMemberLavel | {Language: IMember;}) []'不能分配给类型'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 }],
     },
  });
  };

后记

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

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

标签： reactjstypescript

Answer 1

您要添加的新成员memberLavel缺少level属性，请添加该属性

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

IMemberLevel或在界面中将其设置为可选

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