使用react鈎子更新本地狀態

Question

我正在學習如何使用掛鈎，並且在理解如何使用本地組件狀態方面仍然遇到一些麻煩。

在以下組件中，我正在獲取數據以顯示為列表。 我將其存儲在本地狀態並顯示列表。

現在，我想從列表中刪除一項，並在顯示數據的本地狀態下更新當前變量，並刪除我剛剛刪除的一項。

問：我使用本地狀態變量，在這種情況下如何做feeds的deleteFeed方法，所以我可以更新列表。 在基於類的組件中，我本可以使用this.state.feeds進行更新，但是如何在功能組件中完成呢？

import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'

import * as FeedsAPI from '../../../lib/feeds/FeedsAPI'

import FeedsList from './components/FeedsList'
import AddNewFeed from './components/AddNewFeed'
import DSPageLoader from '../../../components/DSPageLoader/DSPageLoader'
import FeedCard from './components/FeedCard'

const AddNewFeedCard = FeedCard(AddNewFeed)

export default function Feeds (params) {
    const[feeds, setFeeds] = useState([])
    const[providers, setProviders] = useState([])
    const[loading, setLoading] = useState(true)
    const[error, setError] = useState(false)

    /**
     * Method used run after evey lifecycle event
     */
    useEffect( () => {      
        Promise.all(
            [
                FeedsAPI.getFeeds('id', 732),
                FeedsAPI.getFeedProviders()
            ]
        )
        .then( response => {
            setFeeds(response[0])
            setProviders(response[1])
            setLoading(false)
        })
        .catch( error => {setLoading(false); setError(error)})
    }, [])

    /** 
     * Update feeds in local state 
     * 
     * @param feed single feed object 
     */
    const updateFeed = (feed) => console.log(feed)

    /**
     * Delete feed
     * 
     * @param feedId 
     */
    const deleteFeed = (feedId) => {
        FeedsAPI.deleteFeed(feedId)
        .then( response => { 
            let updatedFeeds = feeds.filter( feed => feed.id != feedId )
            setFeeds(feeds)
        })
        .catch( error => console.log(error))
    }

    /* TODO: Refactor this to use with page loading HOC */
    if (loading) {
        return <DSPageLoader/>
    }

    return (
        <div className="container">
            <FeedsList 
                feeds={feeds} 
                providers={providers}
                updateFeed={updateFeed}
                deleteFeed={deleteFeed}
                />
            <AddNewFeedCard />
        </div>
    )
}

Answer 1

很簡單，只要在使用變量提要之前就已對其進行定義，就可以使用它。 您已正確使用它，但出現錯誤，即您沒有將狀態設置為已更新的提要變量

 let updatedFeeds = feeds.filter( feed => feed.id != feedId )
 setFeeds(updatedFeeds) // you were setting it to the old unchanged feeds variable

請記住，過濾器函數從不修改原始變量，它總是創建一個新對象，該對象被修改