アレイから何かを削除するためにReduxストアを更新すると再レンダリングされません

Question

私はバッチ追加システムを作っています。システムでは、私はreduxストアプロパティ名addPlayerListを持っています。ここでは、バッチを追加するすべてのプレイヤーを配置します。プレーヤーを追加プレーヤーリストに追加するのは問題ありません。状態は変更を反映し、マテリアルUIチップを正しくレンダリングします。しかし、私がChipsの削除ボタンでそれらを削除すると、州は私のreduxストアに反映されますが、ページを再レンダリングしません。だから、プレイヤーは私の店にもう存在しませんが、彼はまだページに表示されています。

私が別の検索を実行すると、何かを再レンダリングすると、リストが正しく修正されます。この問題に関わる助けをいただければ幸いです。 removePlayerFromListのためのあなたの減速コードで

class AddPlayer extends Component { 

    onClick =() => { 
    let {addPlayerToList} = this.props; 
    addPlayerToList(); 
    } 

    handleRequestDelete(index) { 
    //figure out who the sender of it is 
    let {removePlayerFromList} = this.props; 
    removePlayerFromList(index); 
    } 

    render() { 
    let {addPlayerToList, addPlayerList} = this.props 
    let renderPlayersToAdd =() => { 
     if (addPlayerList.length === 0) { 
     return (
      <p>No Players to add</p> 
     ) 
     } 

     return addPlayerList.map((Player, index) => { 
     return (
     <Chip 
      key={index} 
      onRequestDelete={this.handleRequestDelete.bind(this, index)}> 
      <Avatar src={getImageURL(Player.id)} /> 
      {Player.name} 
     </Chip> 
     ); 
     }) 
    } 

    return (
     <div> 
     <TypeAhead /> 
     <RaisedButton onClick={addPlayerToList} label="Add Player" /> 
     {renderPlayersToAdd()} 
     </div> 
    ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    selectedSuggestion: state.selectedSuggestion, 
    addPlayerList: state.addPlayerList 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    addPlayerToList(Player) { 
     dispatch(actions.addPlayerToList(Player)); 
    }, 
    removePlayerFromList(index) { 
     dispatch(actions.removePlayerFromList(index)); 
    } 
    } 
} 

const mergeProps = (stateProps, dispatchProps, ownProps) => { 
    return { 
    addPlayerToList:() => dispatchProps.addPlayerToList(stateProps.selectedSuggestion), 
    addPlayerList: stateProps.addPlayerList, 
    removePlayerFromList: (index) => dispatchProps.removePlayerFromList(index) 
    } 
} 

const AddPlayerWithMutation = graphql(AddPlayerMutation)(AddPlayer); 
const AddPlayerWithMutationAndState = connect(mapStateToProps, mapDispatchToProps, mergeProps)(AddPlayerWithMutation); 
export default AddPlayerWithMutationAndState; 

Answer 1

、make sure you're not mutating the original array。だから、（ "p"が入っている）を使わないでください。むしろこのようなことをしてください

function removeIndex(array, index) { 
    return [ 
    ...array.slice(0,index), 
    ...array.slice(index +1) 
    ]; 
}; 

これは、指定されたインデックスに値を持たない新しい配列を作成します。そしてそれは再レンダリングを引き起こすはずです。

これはバグが存在する場所であるとは約束できませんが、それが最善の策です。