Обновить компонент после удаления объекта - ReactJS

Question

Я хотел бы попросить ваше мнение об этом. В принципе, я хочу сейчас обновить список компонентов после удаления элемента в списках объектов. В настоящее время я могу успешно удалить элемент через функцию deleteHeroes(list,index), но мой компонент не освежает вообще, чтобы отразить удаленный элемент. Можете ли вы рассказать о том, как я могу это сделать? вот мой код ниже:

componentDidMount(){ 
    // Fetch lists of heroes 
    this.props.getAllHeroes(); 
} 

renderHeroesList(){ 
    var listData = this.props.heroes.map((heroes,index) => (
     <HeroesListComponent key={heroes.id} heroes={heroes} onDelete = {() => this.deleteHeroes(heroes,index)} /> 
    )); 

    return listData; 
} 

// Remove item on heroes list 
deleteHeroes(list,index){ 
    const heroesProps = this.props.heroes; 
    heroesProps.splice(heroesProps.indexOf(index), 1); 
} 

render(){ 

    return(
     { this.renderHeroesList() } 
    ); 


function mapStateToProps(state){ 
    return { 
     heroes: state.heroes.data 
    } 
}} 
function mapDispatchToProps(dispatch){ 
    return bindActionCreators ({ 
     getAllHeroes: getAllHeroes, 
     deleteHero: deleteHero, 
    }, dispatch); 
} 

Answer 1

Потому что вы ничего не сообщили о ваших изменениях.

Вы должны направить действие после deleteHeroes, что-то вроде этого

deleteHeroes(list,index){ 
    const { heroesProps, dispatch }= this.props; 
    heroesProps.splice(heroesProps.indexOf(index), 1); 
    dispatch({type: 'SAVE_HEROES', heroes: heroesProps}); 
} 

// and somewhere in reducer 
case SAVE_HEROES: 
    return {...state, heroes: action.heroes} 

и написать соответствующую функцию редуктора. Но пусть компонент delete hereos (alter state), вы нарушили идею сокращения.

Вместо этого компонент не должен напрямую изменять героев, вы отправляете действие типа DELETE_HEROES и даете редуктору все остальное.

Answer 2

У вас есть 2 основных варианты для рассмотрения:

1. поместить данные (состояние) к общему общему предку, то есть стандартная стратегия от реакции: https://facebook.github.io/react/docs/lifting-state-up.html

2. поставить все государство Redux (https://github.com/reactjs/react-redux), затем подключите ваш компонент и дисплей в зависимости от состояния redux. этот случай, у не должны делать ничего после удаления, Redux рамках будет заботиться о потоке данных и пользовательский интерфейс обновления

Answer 3

У вас есть побочный эффект, который следует избегать любой ценой. В вашем случае это то, что вы мутируете внутреннюю ссылку heroes реквизита. Настолько типичный план, чтобы избежать этой проблемы - клонировать реквизит, а затем отправить новое действие с новыми данными реквизита. Так что ваш код должен выглядеть следующим образом:

deleteHeroes(list,index){ 
    const clonedHeroesProps = this.props.heroes.slice(0); // clone the array 
    heroesProps.splice(heroesProps.indexOf(index), 1); 
    dispatch({type: 'SAVE_HEROES', heroes: clonedHeroesProps}); 
} 

Чем лучше, более Reactish способом было бы с помощью Immutability Helpers:

deleteHeroes(list,index){ 
    const clonedHeroesProps = update(heroesProps, {$splice: [[heroesProps.indexOf(index), 1]]}); 
    dispatch({type: 'SAVE_HEROES', heroes: clonedHeroesProps}); 
}