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

您有副作用，应该不惜一切代价避免。在您的情况下，您正在改变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});
}

Answer 2

因为您没有通知任何有关您的更改的信息。

您必须在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}

并将相应的函数写入reducer。但是让组件删除hereos（改变状态），你打破了redux的想法。

相反，组件不应该直接修改英雄，而是发出类似＆＃39; DELETE_HEROES＆＃39;让减速机完成其余的工作。

Answer 3

您需要考虑两个主要选项：

将数据（状态）放入共享的共同祖先，这是反应的标准策略：https://facebook.github.io/react/docs/lifting-state-up.html
将所有状态置于Redux（https://github.com/reactjs/react-redux），然后根据redux状态连接组件并显示。这种情况下，你删除后不必做任何事情，redux框架会照顾数据流和ui刷新

删除对象后刷新组件 - ReactJS

3 个答案: