Reduxのが反応-ブートストラップ折りたたみパネルの問題

Question

は、だから私は基本的に、私は問題を抱えています唯一のものは、パネルの崩壊状態を追跡することであるFCCのRecipeBox Project

の1を終えました。

つまり、アプリの状態（レシピの追加、削除、編集のいずれか）を変更するたびに、ページが再描画され、すべてのパネルがそれをアンコレラートします。

私はReact-Bootstrap Documentを見ましたが、わかりません。

私の現在のコードは動作しません

各レシピ項目の状態を適用する

のsrc /コンテナ/ recipebox

class RecipeBox extends Component { 
    constructor(props){ 
    super(props); 
    this.state = {open: false} 
    this.renderRecipeList = this.renderRecipeList.bind(this) 
    this.handleRecipeNameChange = this.handleRecipeNameChange.bind(this) 
    this.handleUserIngredientsChange = this.handleUserIngredientsChange.bind(this) 
    } 

    handleRecipeNameChange(event){ 
    this.setState({recipeName: event.target.value}) 
    } 
    handleUserIngredientsChange(event){ 
    this.setState({userIngredients: event.target.value}) 
    } 
    renderRecipeList(recipeItem, index){ 
    const recipe = recipeItem.recipe; 
    const ingredients = recipeItem.ingredients; 
    const recipeID = recipeItem.id; 
    const id = shortid.generate(); 
    return(
     <div key={id}> 
     <Panel 
      collapsible 
      onClick={()=> this.setState({ open: !this.state.open })} 
      eventKey={index} 
      header={<h3>{recipe}</h3>}> 
      <ListGroup > 
      <ListGroupItem header="Ingredients"></ListGroupItem> 
      {ingredients.map(function(ingredient,index){ 
       return <ListGroupItem key={index}>{ingredient}</ListGroupItem>; 
      })} 
      <ListGroupItem> 
       <Button 
       onClick={() => this.props.deleteRecipe(recipeItem)} 
       bsStyle="danger">Delete 
       </Button> 
       <Edit 
       recipeName={recipe} 
       userIngredients={ingredients} 
       recipeID={recipeID} 
       /> 
      </ListGroupItem> 
      </ListGroup> 
     </Panel> 
     </div> 
    ) 
    } 
    render(){ 
    const self = this; 
    return(
     <div className="container"> 
     <div className='panel-group'> 
      {this.props.recipeList.map(self.renderRecipeList)} 
     </div> 
     </div> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return { 
    recipeList : state.recipeState 
    }; 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({deleteRecipe : deleteRecipe, editRecipe : editRecipe}, dispatch) 
} 

export default connect(mapStateToProps,mapDispatchToProps)(RecipeBox); 

Answer 1

だから私は間違っていたかを把握することができた：私はのために必要各レシピには独自のコンポーネント状態があります。

レシピ項目のそれぞれをレンダリングするレシピリストと、独自の状態コンポーネントを持つ別のコンポーネントが作成されました。

私ように修飾：

SRC /コンテナ/ recipebox

import React, { Component } from 'react'; 
    import { connect } from 'react-redux'; 
    import { ListGroup, ListGroupItem, Panel, Button, Modals } from 'react-bootstrap'; 
    import RecipeList from '../containers/recipe_list' 

    class RecipeBox extends Component { 
     constructor(props){ 
     super(props); 
     } 
     render(){ 
     let itemList = []; 
     this.props.recipeList.forEach(function(item){ 
      itemList.push(
      <RecipeList 
       key={item.id} 
       recipeID={item.id} 
       recipe={item.recipe} 
       ingredients={item.ingredients} 
      />) 
     }) 
     return(
      <div className="container"> 
      <div className='panel-group'> 
       {itemList} 
      </div> 
      </div> 
     ) 
     } 
    } 

    function mapStateToProps(state) { 
     return { 
     recipeList : state.recipeState 
     }; 
    } 

    export default connect(mapStateToProps)(RecipeBox); 

SRC /コンテナ/ recipe_list

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { ListGroup, ListGroupItem, Panel, Button, Modals } from 'react-bootstrap'; 
import { bindActionCreators } from 'redux'; 
import { deleteRecipe, editRecipe } from '../actions/index'; 
import shortid from 'shortid' 
import Edit from '../containers/edit_recipe' 

class RecipeList extends Component { 
    constructor(props){ 
    super(props); 
    this.state = {open: false} 
    } 
    handleRecipeNameChange(event){ 
    this.setState({recipeName: event.target.value}) 
    } 
    handleUserIngredientsChange(event){ 
    this.setState({userIngredients: event.target.value}) 
    } 
    render(){ 
    return(
     <div> 
     <Panel 
      collapsible 
      header={<h3>{this.props.recipe}</h3>}> 
      <ListGroup > 
      <ListGroupItem header="Ingredients"></ListGroupItem> 
      {this.props.ingredients.map(function(ingredient,index){ 
       return <ListGroupItem key={index}>{ingredient}</ListGroupItem>; 
      })} 
      <ListGroupItem> 
       <Button 
       onClick={() => this.props.deleteRecipe(this.props.recipeID)} 
       bsStyle="danger">Delete 
       </Button> 
       <Edit 
       recipeName={this.props.recipe} 
       userIngredients={this.props.ingredients} 
       recipeID={this.props.recipeID} 
       /> 
      </ListGroupItem> 
      </ListGroup> 
     </Panel> 
     </div> 
    ) 
    } 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({deleteRecipe, editRecipe}, dispatch) 
} 

export default connect(null,mapDispatchToProps)(RecipeList); 

を