Javascript 在Codepen.io中遇到ReactJS和引导问题

在我的项目中，我遇到了两个具体的错误，这两个错误我一辈子都搞不清楚。第一个是：

警告：数组或迭代器中的每个子级都应具有唯一的“键” 道具

下一个问题如下：

无法读取未定义的属性“map”

但我知道，DOM呈现中的每个元素都有一个键属性，

{recipe.components.map（）}

的定义和拼写在任何地方都是一样的。任何帮助都将不胜感激。请在下面找到我的代码

class RecipeApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentIndex: 0,
      recipes: [
        {
          recipeName: "Sample Recipe1",
          ingredients: ["item1", "item2", "item3", "item4"],
          image:
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfkpHkg_PvY3OGFI3FOO80RyvShYc6wfdsbfbMSpnEDDhzzcUJQw",
          id: "item1",
          method: "In here we have the method with which to assemble the recipe into an edible dish"
        },
        {
          recipeName: "Sample Recipe2",
          ingredients: ["item1", "item2", "item3", "item4"],
          image:
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMVo-OeRcXXk-d2F7ymofbRMHBJzrXx8izKbva15aWR0l9Sf1g7A",
          id: "item2",
          method: "In here we have the method with which to assemble the recipe into an edible dish"
        },
        {
          recipeName: "Sample Recipe3",
          ingredients: ["item1", "item2", "item3", "item4"],
          image: "http://clubsinnyc.com/img/noimage.jpg",
          id: "item3",
          method: "In here we have the method with which to assemble the recipe into an edible dish"
        }
      ],
      newRecipe: { recipeName: "", ingredients: [], image: "", id: "", method: "" }
    };

    //console.log(this.state.recipes);
  }

  updateNewRecipe(recipeName, ingredients, image, method){
    this.setState({newRecipe: {recipeName: recipeName, ingredients: ingredients, image: image, method: method}})
  }

  saveNewRecipe(){
    let recipes = this.state.recipes.slice();
    var id = function(){
      return '_' + Math.random().toString(36).substr(2, 9);
    }
    recipes.push({recipeName: this.state.newRecipe.recipeName, ingredients: this.state.newRecipe.ingredients, image: this.state.newRecipe.image, id: id, method: this.state.newRecipe.method});
    localStorage.setItem("recipes", JSON.stringify(recipes));
    this.setState({recipes});
    this.setState({newRecipe: {recipeName: "", ingredients: [], image: "", method: ""}});
  }


  render() {
    var { recipes, newRecipe, currentIndex } = this.state;
    //console.log(recipes);
    return (
      <div className="container w3-card">
        <div>
          {recipes.map((recipe, index) => (
            <div className="panel-group w3-margin" id="accordion">
              <div className="panel panel-primary">
                <div className="panel-heading" eventkey={index} key={index}>
                  <h2 className="text-center" data-toggle="collapse" data-target={"#" + recipe.id}>{recipe.recipeName}</h2>
                </div>
                <div className="panel-collapse collapse row" id={recipe.id}>
                  <div className="panel-body">
                    <ol className="list-group pull-left col-md-5 w3-margin">
                      {recipe.ingredients.map((item) => (
                        <li className="list-group-item" key={item}>{item}</li>
                      ))}
                    </ol>
                    <div className="pull-right img-responsive col-md-7" id="image">
                      <img className="thumbnail" src={recipe.image} alt="recipe-image" id="image" key={index} />
                    </div>
                    <div className="container-fluid w3-card pull-left col-md-12" id="method" key={index}>
                      {recipe.method}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
          <div className="modal fade" tabIndex="-1" role="dialog" id="newModal">
            <div className="modal-dialog" role="document">
              <div className="modal-content">
                <div className="modal-header w3-black">
                  <button type="button" className="btn btn-danger pull-right" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 className="modal-title text-center">Add Recipe</h4>
                </div>
                <div className="modal-body">
                    <div className="form-group">
                      <div className="control-label">Recipe Name</div>
                      <input 
                        className="form-control"
                        type="text"
                        value={recipes.recipeName}
                        onChange={(event) => this.updateNewRecipe(event.target.value, newRecipe.ingredients, newRecipe.image, newRecipe.method)}
                        placeholder="Please Enter Recipe Name..."
                      />
                    </div>
                    <div className="form-group">
                      <div className="pull-left">List Ingredients:</div><br/>
                      <textarea 
                        className="pull-left"
                        type="textarea"
                        value={recipes.ingredients}
                        onChange={(event) => this.updateNewRecipe(newRecipe.recipeName, event.target.value.split(","), newRecipe.image, newRecipe.method)}
                        placeholder="Please list the ingredients [Seperated by commas]"
                      />
                      <div className="pull-right">Image Link:</div><br/>
                      <input
                        className="pull-right"
                        type="text"
                        value={recipes.image}
                        onChange={(event) => this.updateNewRecipe(newRecipe.recipeName, newRecipe.ingredients, event.target.value, newRecipe.method)}
                        placeholder="Supply a link to an image."
                      />
                    </div>
                    <br/>
                    <div className="form-group">
                      <div className="control-label">Method:</div>
                      <textarea
                        className="form-control"
                        type="textarea"
                        value={recipes.method}
                        onChange={(event) => this.updateNewRecipe(newRecipe.recipeName, newRecipe.ingrediets, newRecipe.image, event.target.value)}
                        placeholder="Enter recipe method here..."
                      />
                    </div>
                </div>
                <div className="modal-footer">
                  <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" className="btn btn-primary" data-dismiss="modal" onClick={(event) => this.saveNewRecipe()}>Save Recipe</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <button type="button" className="btn btn-primary btn-lg w3-margin" data-toggle="modal" data-target="#newModal">New Recipe</button>
      </div>
    );
  }
}

ReactDOM.render(<RecipeApp />, document.getElementById("content"));

类RecipeApp扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 当前索引：0， 食谱：[ { recipeName：“样本Recipe1”， 成分：[“第1项”、“第2项”、“第3项”、“第4项”]， 图片： "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfkpHkg_PvY3OGFI3FOO80RyvShYc6wfdsbfbMSpnEDDhzzcUJQw", id:“项目1”， 方法：“在这里，我们有一种将配方组合成可食用菜肴的方法” }, { recipeName：“样本Recipe2”， 成分：[“第1项”、“第2项”、“第3项”、“第4项”]， 图片： "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMVo-OeRcXXk-d2F7ymofbRMHBJzrXx8izKbva15aWR0l9Sf1g7A“， id:“项目2”， 方法：“在这里，我们有一种将配方组合成可食用菜肴的方法” }, { recipeName：“样本Recipe3”， 成分：[“第1项”、“第2项”、“第3项”、“第4项”]， 图像：“http://clubsinnyc.com/img/noimage.jpg", id:“项目3”， 方法：“在这里，我们有一种将配方组合成可食用菜肴的方法” } ], 新配方：{recipeName:，成分：[]，图像：，id:，方法：} }; //console.log（this.state.recipes）； } updateNewRecipe（recipeName、配料、图像、方法）{ this.setState（{newRecipe:{recipeName:recipeName，配料：配料，图像：图像，方法：方法}}） } saveNewRecipe（）{ 让recipes=this.state.recipes.slice（）； var id=函数（）{ 返回'.'+Math.random（）.toString（36）.substr（2,9）； } recipeName.push（{recipeName:this.state.newRecipe.recipeName，配料：this.state.newRecipe.配料，图像：this.state.newRecipe.image，id:id，方法：this.state.newRecipe.method}）； setItem（“recipes”，JSON.stringify（recipes））； this.setState（{recipes}）； this.setState（{newRecipe:{recipeName:，配料：[]，图像：，方法：}}）； } render（）{ var{recipes，newRecipe，currentIndex}=this.state； //console.log（配方）； 返回( {recipes.map（（recipe，index）=>( {recipe.recipeName} {recipe.components.map（（项目）=>(

{item}

))} {recipe.method} ))} &时代； 添加配方 配方名 this.updateNewRecipe（event.target.value，newRecipe.components，newRecipe.image，newRecipe.method）} 占位符=“请输入配方名称…” /> 列出成分：
this.updateNewRecipe（newRecipe.recipeName，event.target.value.split（“，”，newRecipe.image，newRecipe.method）} 占位符=“请列出成分[用逗号分隔]” /> 图像链接：
this.updateNewRecipe（newRecipe.recipeName、newRecipe.Components、event.target.value、newRecipe.method）} placeholder=“提供指向图像的链接。” />
方法： this.updateNewRecipe（newRecipe.recipeName、newRecipe.ingredites、newRecipe.image、event.target.value）} 占位符=“在此处输入配方方法…” /> 接近 此.saveNewRecipe（）}>Save Recipe 新配方 ); } } render（，document.getElementById（“内容”）；

---

问题似乎在于没有正确绑定函数。例如，

saveNewRecipe

。您可以像这样轻松地绑定函数：

saveNewRecipe = () => {}

---

我在这里为您修复了它：

PS。第二个错误只有在我单击模式中的“保存”按钮时才会发生。对不起，无论出于什么原因，显示的是旧版本的代码。再次尝试链接。谢谢@Colin，这解决了第二个错误，但是现在唯一的问题是函数没有完成它应该做的。您可以看到，它应该从newRecipe对象中提取更新的数据，将其转换为JSON格式，并将其添加到recipes对象中，然后映射并显示在DOM中。加上模式中的输入字段没有清除，所以我怀疑函数根本没有启动。现在检查一下，应该可以了。

应该有：

onClick={this.saveNewRecipe}