使用 React Hooks 更新本地状态

Question

我正在学习如何使用挂钩，但在理解如何使用本地组件状态方面仍然有些困难。

在以下组件中，我正在获取数据以显示为列表。我将其存储在本地状态并显示列表。

现在我想从列表中删除一项并更新显示数据的本地状态中的当前变量并删除我刚刚删除的一项。

问题：如何在 deleteFeed 方法中使用局部状态变量，在本例中为 feeds 以便更新列表。在基于 class 的组件中，我本可以使用 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

记住过滤器函数从不修改原始变量，它总是创建一个被修改的新对象

使用 React Hooks 更新本地状态

Updating local state with react hooks

javascript

reactjs

react-hooks