Javascript 基于React.JS中的密钥更新组件

我正在尝试在ReactJS中创建一个可编辑的配方列表。因此，我给每个

配方

分配了一个

键

，这样我就可以通过在某个父组件的

状态

中更改与

键

对应的

配方

来更新配方。 我的应用程序的结构是这样的

App(state) --> RecipeList --> RecipeListItems --> IngredientsList

因此，当我尝试使用

editRecipe

从

App

组件中定义的以下代码更新配方时，它没有被更新，我知道原因，这是因为

RecipeList

已经有一个带有给定

键的
RecipeListItem
，因此它不会用相同的键更新这些组件。我通过从以下位置修改
键来克服这一问题：

<RecipeListItem recipe={recipe} key={recipe.key} onDelete={onDelete} />

我从
App
中删除了
editRecipe
，并将其移动到
RecipeListItem
，并更改了它的状态：）那么您还需要帮助吗？如果是这样，请更新问题。我从
App
中删除了
editRecipe
，并将其移动到
RecipeListItem
，并更改了它的状态：）那么您还需要帮助吗？如果是这样，请更新问题。
<RecipeListItem recipe={recipe} key={JSON.stringify(recipe)} onDelete={onDelete} />

let k = 1;
const localStorageKey = "_developerpruthvi_recipes";
class RecipeList extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    let onDelete = this.props.onDelete;
    let RecipeItems = this.props.recipes.map(function(recipe) {
      return (
        <RecipeListItem recipe={recipe} key={recipe.key} onDelete={onDelete} />
       );
    });
    return (
      <div>
        {RecipeItems}
      </div>
    );
  }
}

class RecipeListItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: props.recipe.title,
      ingredients: props.recipe.ingredients,
      key: props.recipe.key
    };
  }
  deleteRecipe(key) {
    this.props.onDelete(key);
  }
  render() {
    return (
      <div className="recipe">
      <div className="recipe-name" data-toggle="collapse" data-target={'#ingredients-'+this.state.key}>
        <p>{this.state.title}</p>
      </div>
      <div id={"ingredients-" + this.state.key} className="collapse">
        <IngredientList ingredientsList={this.state.ingredients} />
        <button class="btn btn-primary">Edit</button>
        <button class="btn btn-primary" onClick={this.deleteRecipe.bind(this,this.state.key)}>Delete</button>
      </div>
      </div>
    );
  }
}
class IngredientList extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    let ing = this.props.ingredientsList.split(",");
    return (
      React.createElement("ul",{className: "list-group"},ing.map(function(i) {
        return React.createElement("li",{className: "list-group-item"},i);
      }))
    );
  }
}
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {recipes: [{
      title: "Onion Pie 1",
      ingredients: "Onions 1,Water 1,Pie Crust 1",
      key: k++
    },{
      title: "Onion Pie  2",
      ingredients: "Onions 2,Water 2,Pie Crust 2",
      key: k++
    },{
      title: "Onion Pie 3",
      ingredients: "Onions 3,Water 3,Pie Crust 3",
      key: k++
    }]};
    this.getOrStoreRecipesLocalStorage();
    this.deleteRecipe = this.deleteRecipe.bind(this);
  }
  componentDidMount() {
    this.editRecipe(1,"Onion Pie 1","Edited Ing 1 , Edited Ingred 2");
  }
  deleteRecipe(key) {
    let recipes = this.state.recipes;
    recipes = recipes.filter(function(r) {
      return r.key !== key;
    });
    this.setState({recipes});
  }
  editRecipe(key,title,ingredients) {
    let recipes = this.state.recipes;
    for(let i=0;i<recipes.length;i++) {
      if(recipes[i].key === key) {
        recipes[i].title = title;
        recipes[i].ingredients = ingredients;
      }
    }
    this.setState({recipes});
  }
  getOrStoreRecipesLocalStorage() {
    let localRecipes = JSON.parse(localStorage.getItem(localStorageKey));
    if(!localRecipes)
      localStorage.setItem(localStorageKey, JSON.stringify(this.state));
    else {
      this.setState({recipes: localRecipes.recipes})
    }
  }
  render() {
    return (
      <RecipeList recipes={this.state.recipes} onDelete={this.deleteRecipe} />
    );
  }
}
ReactDOM.render(<App />,document.querySelector('.container'));