Reactjs - ボタンをクリックしたときのcomponentWillReceiveProps - ボタンが2回クリックされたときに失敗する

Question

私はReactに新しく、私がやろうとしていることに対してより良いアプローチがあるかもしれない。

ReactとReduxを使用して、ボタンをクリックするとJSONファイルからHTMLスニペットを取り出し、TemplateContentコンポーネントに挿入します。

問題は、行のボタンを2回クリックすると、スニペットを2回挿入したいのですが、nextPropsとthis.propsがないことを確認してcomponentWillReceivePropsのループを防ぐためです。マッチングはうまくいかず、私はそれまでのところ自分の道を見つけることはとても幸運なことではありません。

これは

class TemplateContentContainer extends Component { 
    constructor() { 
     super() 

     this.fetchModule = this.fetchModule.bind(this) 
     this.removeModule = this.removeModule.bind(this) 
    } 

    componentWillReceiveProps(nextProps) { 
     if(nextProps.addedModule !== this.props.addedModule) // prevent infinite loop 
     this.fetchModule(nextProps.addedModule) 
    } 

    fetchModule(id) { 
     api 
      .getModule(id) 
      .then((module) => { 
       this.props.dispatch(actions.receiveModule(module)) 
      }) 
      .catch((err) => { 
       console.log('TemplateContainer Error: ' + err) 
      }) 
    } 

    removeModule(module) { 
     this.dispatch(actions.removeModule(module)) 
    } 

    render() { 
     return (
      <TemplateContent 
       templateModules={this.props.templateModules} 
       removeModule={this.removeModule} 
      /> 
     ) 
    } 
} 

const mapStateToProps = (state) => ({ 
    templateModules: state.receiveModuleById, 
    addedModule: state.addModuleById, //returns id of added module - add me clicked 
}) 

const mapDispatchToProps = (dispatch) => ({ 
    dispatch 
}) 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(withRouter(TemplateContentContainer)) 

は、あなたが任意の追加のコードや、私が達成しようとしている何のさらなる説明が必要な場合は、私に教えてください...私のコードです。

ご協力いただければ幸いです。 :)

Answer 1

複数のモジュールで問題がなければ、再レンダリングの条件として使用しないことをお勧めします。あなたはいつもあなたの好みに合わせてダミーの小道具を使うことができます。

クリックしてアクションをディスパッチすると、dispatch({ type: INCREMENT })となり、そのアクションにマッチするレデューサーがあり、+ + intまたは任意のランダムなものが追加されます。

あなたは私はあなたがすべてセットされていると思いますnextProps

mapStateToProps = ({ counter }) => ({ ...counter })

nextProps.counter !== this.props.counter

およびそれとの条件としてそれを使用する必要があります。

Answer 2

は、この条件を試してみてください。

componentWillReceiveProps(nextProps) { 
    if(nextProps.templateModules !== this.props.templateModules) 
    this.fetchModule(nextProps.addedModule) 
}