我在项目中遇到两个具体错误，我无法理解我的生活。第一个是：
警告：数组或迭代器中的每个子节点都应该有一个唯一的“键” 丙
下一个如下：
无法读取未定义的属性“map”
然而我知道我的DOM渲染中的每个元素都有一个键属性，并且{recipe.ingredients.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">×</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"));
答案 0 :(得分：0)
问题似乎是你没有正确绑定你的功能。例如，function snapshot_btn() {
$("#button_snapshot").datepicker({
autoHide:true,
showOn: 'both',
onSelect: function () {
var dateObject = $(this).datepicker('getDate');
alert(dateObject);
}
});
$("#button_snapshot").datepicker("show");
}
。您可以像这样轻松绑定您的函数：
saveNewRecipe我在这里为你修好了：https://codesandbox.io/s/yjp6npx14v