Javascript 将数据传递给父级-recipebook React

我正在开发配方书应用程序，并尝试实现编辑输入功能。 其工作原理是输入配方名称（如意大利面），然后输入配料（如鸡蛋、面粉、盐）。配料必须用逗号输入，并显示为列表

• 面食
• -蛋
• -面粉

我可以看到它在某种程度上起作用，因为当我再次尝试编辑它时，我可以看到输入文本中的新条目（例如最初是鸡蛋、面粉、盐->鸡蛋、面粉、盐、水）

然而，额外的成分（在上面的例子中：水）并没有出现在列表中。我是否必须找到重新呈现列表的方法

更新： 我想我知道错误可能在哪里。传递数据和设置状态时出现一些问题

<EditRecipe recipe={this.props.recipe} editRecipe={this.editRecipe.bind(this, this.props.recipe.id, recipe)}/>

App.js

    import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import uuid from 'uuid';
import Modal from 'react-modal';
import RecipeList from './components/RecipeList/RecipeList';
import AddRecipe from './components/AddRecipe/AddRecipe';

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      recipes:[]
    };
  }

  getRecipes(){
    this.setState({recipes:[
      {
        id: uuid.v4(),
        food: "pumpkin pie",
        ingredients: ["pumpkin puree", "sweetened condensed milk", "eggs", "pumpkin pie spice", "pie crust"]
      },
      {
        id: uuid.v4(),
        food: "spaghetti",
        ingredients: ["noodles", "tomato sauce", "meatballs"]
      },
      {
        id: uuid.v4(),
        food: "onion pie",
        ingredients: ["onion", "pie crust"]
      },

    ]});
  }

  componentWillMount(){
    this.getRecipes();
  }

  handleAddRecipe(recipe){
    let recipes = this.state.recipes;
    recipes.push(recipe);
    this.setState({recipes: recipes});
  }

  handleDeleteRecipe(id){
    let recipes = this.state.recipes;
    let index = recipes.findIndex(x => x.id === id);
    recipes.splice(index,1);
    this.setState({recipes: recipes});
  }

  handleEditRecipe(id, recipe){
    let recipes = this.state.recipes;
    let index = recipes.findIndex(x => x.id === id);
    recipes.splice(index,1,recipe);
    this.setState({recipes: recipes});
  }

  render() {
    return (
      <div className="App">
        <RecipeList  recipes={this.state.recipes} onDelete={this.handleDeleteRecipe.bind(this)} onEdit={this.handleEditRecipe.bind(this)}/>
        <AddRecipe addRecipe={this.handleAddRecipe.bind(this)}/>
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
//从“/logo.svg”导入徽标；
导入“/App.css”；
从“uuid”导入uuid；
从“反应模态”导入模态；
从“./components/RecipeList/RecipeList”导入RecipeList；
从“./components/AddRecipe/AddRecipe”导入AddRecipe；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
食谱：[]
};
}
getRecipes（）{
此.setState（{配方：[
{
id:uuid.v4（），
食物：“南瓜派”，
配料：[“南瓜泥”、“甜炼乳”、“鸡蛋”、“南瓜派香料”、“派皮”]
},
{
id:uuid.v4（），
食物：“意大利面”，
配料：[“面条”、“番茄酱”、“肉丸”]
},
{
id:uuid.v4（），
食物：“洋葱派”，
配料：[“洋葱”、“馅饼皮”]
},
]});
}
组件willmount（）{
这个.getRecipes（）；
}
掌心药（配方）{
让recipes=this.state.recipes；
配方。推送（配方）；
this.setState（{recipes:recipes}）；
}
手持电子设备（id）{
让recipes=this.state.recipes；
让index=recipes.findIndex（x=>x.id==id）；
配方。拼接（索引1）；
this.setState（{recipes:recipes}）；
}
HandleEdit配方（id，配方）{
让recipes=this.state.recipes；
让index=recipes.findIndex（x=>x.id==id）；
配方。拼接（索引1，配方）；
this.setState（{recipes:recipes}）；
}
render（）{
返回(
);
}
}
导出默认应用程序；

RecipeList.js

import React, { Component } from 'react';
import Collapsible from 'react-collapsible';
import RecipeItem from '../RecipeItem/RecipeItem'
import './RecipeList.css';

class RecipeList extends Component{

deleteRecipe(id){
  this.props.onDelete(id);
}

editRecipe(id, recipe){
  this.props.onEdit(id, recipe);
}

  render(){

    let recipeItem;

    if(this.props.recipes){
      recipeItem=this.props.recipes.map(recipe => {
        return(
          <RecipeItem onEdit={this.editRecipe.bind(this)} onDelete={this.deleteRecipe.bind(this)} key={recipe.id} recipe={recipe} />
        )
      });
    }

    return(
      <div className="recipeList box">
      {recipeItem}
      </div>
    )
  }
}

export default RecipeList;

import React，{Component}来自'React'；
从“反应可折叠”导入可折叠；
从“../RecipeItem/RecipeItem”导入RecipeItem
导入“/RecipeList.css”；
类RecipeList扩展了组件{
删除配方（id）{
this.props.onDelete（id）；
}
编辑配方（id，配方）{
this.props.onEdit（id，recipe）；
}
render（）{
让我们相互尊重；
如果（这个。道具。食谱）{
recipeItem=this.props.recipes.map（recipe=>{
返回(
)
});
}
返回(
{recipeItem}
)
}
}
导出默认RecipeList；

RecipeItem.js

import React, { Component } from 'react';
import Collapsible from 'react-collapsible';
import EditRecipe from '../EditRecipe/EditRecipe';

class RecipeItem extends Component{

  deleteRecipe(id){
    this.props.onDelete(id);
  }

  editRecipe(id, recipe){
    this.props.onEdit(id, recipe);
  }

  render(){

    let recipe=this.props.recipe
    let foodName=recipe.food;
    let ingredientItem;

    if(recipe.ingredients){
      ingredientItem=recipe.ingredients.map(ingredient=>{
        return(
          <a className="panel-block">
            {ingredient}
          </a>
        )
      })
    }
    return(
      <ul>
        <li className="Recipe">
        <Collapsible trigger={foodName} transitionTime="200" easing="ease-in-out">
        <nav className="panel">
          <p className="panel-heading">
            Ingredients
          </p>
          {ingredientItem}
          <div className="panel-block">
            <button className="button is-warning is-outlined" onClick={this.deleteRecipe.bind(this, this.props.recipe.id)}>
              Delete
            </button>
            <EditRecipe recipe={this.props.recipe} editRecipe={this.editRecipe.bind(this, this.props.recipe.id, recipe)}/>
          </div>
          </nav>
        </Collapsible>
        </li>
      </ul>
    );
  }
}

export default RecipeItem;

import React，{Component}来自'React'；
从“反应可折叠”导入可折叠；
从“../EditRecipe/EditRecipe”导入EditRecipe；
类RecipeItem扩展组件{
删除配方（id）{
this.props.onDelete（id）；
}
编辑配方（id，配方）{
this.props.onEdit（id，recipe）；
}
render（）{
让配方=this.props.recipe
让foodName=配方食品；
让我们来讨论这个问题；
if（配方、配料）{
IngreditItem=配方.配料.映射（配料=>{
返回(
{成分}
)
})
}
返回(



成分

{IngreditItem}
删除


);
}
}
导出默认RecipeItem；

EditRecipe.js

import React, { Component } from 'react';
import RecipeForm from '../RecipeForm/RecipeForm';
// import './EditRecipe.css';
import Modal from 'react-modal';
import uuid from 'uuid';
// import Modal from 'boron/DropModal';
// import './RecipeList.css';

class RecipeEdit extends Component{

  constructor(props){
    super(props);
    this.state = {
      revisedRecipe:{
        id: this.props.recipe.id,
        food: this.props.recipe.food,
        ingredients: this.props.recipe.ingredients
      },
      modalIsOpen: false,
      speed: 100
    };
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal(){
    this.setState({modalIsOpen: true});
  }

  closeModal(){
    this.setState({modalIsOpen: false});
  }

  handleSubmit(e){

    const revised = this.state.revisedRecipe;

    this.props.editRecipe(revised);

    e.preventDefault();
  }


  handleNameChange(e){
    this.setState({revisedRecipe:{
      food: e.target.value
    }
  });
  }

  handleIndChange(e){
    this.setState({revisedRecipe:{
      ingredients: e.target.value
    }
  });
  }



  render(){
    const speed = this.state.speed;
    let recipe=this.props.recipe;
    let foodName=this.state.revisedRecipe.food;
    let ingredients=recipe.ingredients;

    return(
      <div>
        <button className="button is-primary" onClick={this.openModal}>Edit Recipe</button>
        <Modal
          isOpen={this.state.modalIsOpen}
          onAfterOpen={this.afterOpenModal}
          onRequestClose={this.closeModal}
          closeTimeoutMS={speed}
          contentLabel="Example Modal"
        >
        <div className="field">
          <h2 className="title is-2">Edit Recipe</h2>
          <form>
            <label className="label">Recipe</label>
            <div className="control">
              <input className="input" type="text" placeholder="Recipe Name" ref="recipeName" value={this.state.revisedRecipe.food} onChange={this.handleNameChange.bind(this)}/>
            </div>
            <div className="field">
            <label className="label">Ingredients</label>
            <div className="control has-icons-left has-icons-right">
              <input className="input" type="text" placeholder="Enter ingredients. (if more than 1 ingredient, separate them with commas)" ref="ingredients" value={this.state.revisedRecipe.ingredients} onChange={this.handleIndChange.bind(this)}/>
              <span className="icon is-small is-left">
                <i className="fa fa-flask"></i>
              </span>
            </div>
            </div>
            <div className="field is-grouped">
              <div className="control">
                <button className="button is-primary" onClick={this.closeModal}>Edit Recipe</button>
              </div>
              <div className="control">
                <button className="button" onClick={this.closeModal}>Cancel</button>
              </div>
            </div>
            </form>
        </div>
        </Modal>
      </div>
    );
  }
}

export default RecipeEdit;

import React，{Component}来自'React'；
从“../RecipeForm/RecipeForm”导入RecipeForm；
//导入“/EditRecipe.css”；
从“反应模态”导入模态；
从“uuid”导入uuid；
//从“硼/滴落模式”导入模式；
//导入“/RecipeList.css”；
类RecipeEdit扩展组件{
建造师（道具）{
超级（道具）；
此.state={
修订配方：{
id:this.props.recipe.id，
食物：这个。道具。食谱。食物，
配料：这个。道具。配方。配料
},
modalIsOpen:false，
速度：100
};
this.openModal=this.openModal.bind（this）；
this.closeModal=this.closeModal.bind（this）；
}
openModal（）{
this.setState（{modalIsOpen:true}）；
}
closeModal（）{
this.setState（{modalIsOpen:false}）；
}
handleSubmit（e）{
const revised=this.state.revisedRecipe；
此.props.editRecipe（修订版）；
e、 预防默认值（）；
}
手形变化（e）{
此.setState（{ReviedRecipe:{
食物：即目标价值
}
});
}
handleIndChange（e）{
此.setState（{ReviedRecipe:{
成分：e.目标价值
}
});
}
render（）{
const speed=this.state.speed；
让配方=this.props.recipe；
让foodName=this.state.revisedRecipe.food；
让配料=配方配料；
返回(
编辑配方
编辑配方
配方
成分
编辑配方
取消
);
}
}
导出默认的RecipeEdit；

我相信，在更新列表后尝试重新渲染时，实际上会出现错误。配方中的配料属性是一个数组（如

getRecipes（）

所示），但您正在设置配料的新状态

this.setState({revisedRecipe: {ingredients: e.target.value.split(',')}});

const recipe = this.state.revisedRecipe;
recipe.ingredients = e.target.value.split(',');
this.setState({revisedRecipe: recipe);