如何使用 React 和 TypeScript 将对象推送到嵌套数组中？答案

【问题标题】：How to push an object inside nested array using React and TypeScript?如何使用 React 和 TypeScript 将对象推送到嵌套数组中？
【发布时间】：2022-01-10 21:39:02
【问题描述】：

使用 TypeScript 和 React 创建一个将新对象推入数组 items 的函数的正确方法是什么？

const [state, setState] = useState([
  {
    firstname: "William",
    items: [
      { name: "sword", damage: 100 },
      { name: "shield", damage: 50 },
    ],
  },
  {
    firstname: "Allison",
    items: [
      { name: "bow", damage: 70 },
      { name: "axe", damage: 120 },
    ],
  },
]);

const addNewItem = (newItem: object, CharacterIndex: number) => {

  // Push new item inside character's items.
  setState(newState)
};

return (
  <button onClick={() => addNewItem({ name: "dagger", damage: 50 }, 2)}>
    Add Item
  </button>
);

我已经使用过一次 JavaScript，但是使用 Typescript 我经常会遇到一些错误。

【问题讨论】：

什么错误，来自什么代码？给minimal reproducible example - React 在这里真的相关吗？
TypeError: 无法分配给对象“#
Edit 提供 MRE 的问题，根据 How to Ask 中的指导。
是的，我会这样做的，更清楚
你想要 any 而不是 object - 也就是说，这些将是类型（所以你要定义一个 ItemType 或其他什么）并且你不想改变你要推送的数组换一个新的

标签： javascript reactjs typescript

【解决方案1】：

您可以按照您认为最合适的方式实施它。

const addNewItem = (newItem: object, CharacterIndex: number) => {

    //I would use this
    setState(state.map((elem: object, index: number) => {
        return index === characterIndex 
            ? { ...elem, items: [ ...elem.items, newItem ] }
            : elem;
    }));
};

【讨论】：

【解决方案2】：

你应该输入你的状态和你所有的数组

import { useState } from "react";
import "./styles.css";

const INITIAL_STATE = [
  {
    firstname: "William",
    items: [
      { name: "sword", damage: 100 },
      { name: "shield", damage: 50 }
    ]
  },
  {
    firstname: "Allison",
    items: [
      { name: "bow", damage: 70 },
      { name: "axe", damage: 120 }
    ]
  }
];

type Item = {
  name: string;
  damage: number;
};

type StateParams = {
  firstname: string;
  items: Item[];
};

export default function App() {
  const [state, setState] = useState<StateParams[]>(INITIAL_STATE);

  const addNewItem = (newItem: Item, characterIndex: number) => {
    const nextState = state.map((st, i) => {
      if (i === characterIndex) {
        return {
          firstname: st.firstname,
          items: [...st.items, newItem]
        };
      } else {
        return st;
      }
    });

    setState(nextState);

    console.log(state);
  };

  return (
    <button onClick={() => addNewItem({ name: "dagger", damage: 50 }, 1)}>
      Add Item
    </button>
  );
}

【讨论】：