使用 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 我經常會遇到一些錯誤。
uj5u.com熱心網友回復：
您可以按照您認為最合適的方式實施它。
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;
}));
};
uj5u.com熱心網友回復：
您應該輸入您的狀態和所有陣列
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>
);
}轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/407767.html
標籤：