使用反应钩子更新本地状态答案

【问题标题】：Updating local state with react hooks使用反应钩子更新本地状态
【发布时间】：2019-03-12 02:02:24
【问题描述】：

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

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

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

问题：如何使用本地状态变量，在这种情况下，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>
    )
}

【问题讨论】：

很简单，您只需使用变量提要，前提是您在使用它之前已定义它。您已正确使用它，但错误是更新您未将状态设置为更新的提要变量

标签： javascript reactjs react-hooks

【解决方案1】：

您只需使用变量 feed，只要您在使用它之前已经定义它。您已正确使用它，但错误是更新您未将状态设置为更新的提要变量

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

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

【讨论】：

facepalm 我的疏忽大意。谢谢，这让我很生气。