Обновление локального состояния с помощью реагирующих хуков - PullRequest
Новая
       11

Обновление локального состояния с помощью реагирующих хуков

0 голосов
/ 12 марта 2019

Я изучаю, как использовать хуки, и у меня все еще есть небольшие проблемы с пониманием, как использовать состояние локального компонента.

В следующем компоненте я выбираю данные для отображения в виде списка. Я храню это в локальном состоянии и отображаю список.

Теперь я хочу удалить элемент из списка и обновить текущую переменную в локальном состоянии, которая отображает данные, и удалить только что удаленный элемент.

Вопрос: Как использовать локальную переменную состояния, в данном случае 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>
    )
}

1 Ответ

1 голос
/ 12 марта 2019

просто, вы просто используете переменные каналы, при условии, что вы определили его ДО его использования. вы использовали его правильно с ошибкой, что при обновлении вы не устанавливаете состояние для обновленной переменной фидов 

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

помните, что функция фильтра никогда не изменяет исходную переменную, она всегда создает новый объект, который изменяется

...