如何使用 React 和 TypeScript 在嵌套數組中推送 object？

Question

使用 TypeScript 和 React 創建一個 function 的正確方法是什么，該方法將新的 object 推入數組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 我經常會遇到一些錯誤。

Answer 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;
    }));
};

Answer 2

你應該輸入你的 state 和你所有的 arrays

 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> ); }