Я получаю две конкретные ошибки в своем проекте, которые я не могу понять на всю жизнь.Первый из них:
Предупреждение. У каждого дочернего элемента в массиве или итераторе должна быть уникальная пропозиция «ключа».
Следующий следующий:
Невозможно прочитать свойство '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"));