我如何写一个删除处理函数与React钩子?

Question

我正在使用hooks在React中创建一个抽认卡应用程序，并且在删除抽认卡时遇到麻烦。我能够在页面上呈现带有抽读卡名称、描述、卡片计数和所需按钮的Bootstrap卡片。然而，我无法删除一副牌，因为我被告知setFlashcards不是一个函数。下面是我的代码:

App.js

function Layout() {
const [flashcards, setFlashcards] = useState([])
useEffect(() => {
axios
.get('http://localhost:5000/decks?_embed=cards')
.then(res => {
setFlashcards(res.data.map((questionItem, index) => {
return {
id: `${index}-${Date.now()}`,
name: questionItem.name,
description: questionItem.description,
cards: questionItem.cards.length,
}
}))
})
}, [])
return (
<div>
<Header />
<ShowAllDecks flashcards={flashcards} setFlashcards={setFlashcards} />
<NotFound />
</div>
)
}

ShowAllDecks.js

function ShowAllDecks({ flashcards, setFlashcards }) {
return (
<div className='container'>
<button>Create New</button>
{flashcards.map((flashcard) => {
return <Deck flashcards={flashcards} flashcard={flashcard} key={flashcard.id} />
})}
</div>
)
}

Deck.js

function Deck({ flashcard, flashcards, setFlashcards }) {
const deleteHandler = () => {
setFlashcards(flashcards.filter(el => el.id !== flashcard.id))
}

return (
<div className='container'>
<div className='card'>
<div className='card-body'>
<h3 className='card-title'>{flashcard.name}</h3>
<p className='card-text'>{flashcard.description}</p>
<p className='card-text'>{flashcard.cards} cards</p>
<button>View</button>
<button>Study</button>
<button onClick={deleteHandler}>Delete</button>
</div>
</div>
</div>
)
}

只有一张牌的牌组示例:

[
{
'id': 1,
'name': 'A Deck Name'
'description': 'A Deck Description',
'cards': [
{
'id': 1,
'front': 'Front of card',
'back': 'Back of card',
'deckId': 1
}
]
}
]

Answer 1

我假设您正在运行调用以获得App.js中的flashcards，因为您要将其传递给其他组件?如果您打算将道具深入到其他组件中，最好也使用Context。否则，如果它只是为了显示所有牌组，那么你可以在AllDecks组件中运行fetch。无论如何，我已经改变了你的代码下面保持它在App.js:

App.js

function Layout() {
const [flashcards, setFlashcards] = useState([])
const deleteHandler = (id) => {
setFlashcards(flashcards.filter(deck => deck.id !== id));
}
useEffect(() => {
axios
.get('http://localhost:5000/decks?_embed=cards')
.then(res => {
setFlashcards(res.data.map((questionItem, index) => {
return {
id: `${index}-${Date.now()}`,
name: questionItem.name,
description: questionItem.description,
cards: questionItem.cards.length,
}
}))
})
}, [])
return (
<div>
<Header />
<ShowAllDecks flashcards={flashcards} deleteHandler={deleteHandler} />
<NotFound />
</div>
)
}

ShowAllDecks.js

function ShowAllDecks({ flashcards, deleteHandler }) {
return (
<div className='container'>
<button>Create New</button>
{flashcards.map((flashcard) => {
return <Deck flashcard={flashcard} key={flashcard.id} deleteHandler={deleteHandler} />
})}
</div>
)
}

Deck.js

function Deck({ flashcard, deleteHandler }) {

return (
<div className='container'>
<div className='card'>
<div className='card-body'>
<h3 className='card-title'>{flashcard.name}</h3>
<p className='card-text'>{flashcard.description}</p>
<p className='card-text'>{flashcard.cards} cards</p>
<button>View</button>
<button>Study</button>
{/* 
** this will now run the deleteHandler in the App component and pass 
** the id of the current deck to it. It will then run the state hook
** and set the new flashcards without this deck 
*/}
<button onClick={() => deleteHandler(flashcard.id)}>Delete</button>
</div>
</div>
</div>
)
}