Question

我正在构建食谱应用程序，但在使用删除功能时遇到了麻烦。

它的工作原理是单击“添加配方”按钮，然后弹出一个模式，使您可以填写一些新配方的输入字段。在该表单中有一个成分字段和一个“添加成分”按钮。您单击“添加”，该成分即被添加到成分列表中。它的行为与待办事项列表完全相同，但是它在表单组件内部。我还希望能够删除一种成分。

我的应用程序组件的结构如下：

RecipeBook.js（父级）
RecipeCardForm.js（子级）

这是位于父级组件中的表单组件：

<RecipeCardForm
handleRemoveIngredients={this.handleRemoveIngredients}
/>

父级组件中还包含removeIngredient函数：

handleRemoveIngredient = id => {
  const filteredIngredientList =  this.state.ingredientList.filter(ingredient => id !== ingredient.id);
  this.setState({ingredientList: filteredIngredientList})
  }

在子组件中，它在<ul>内返回，其中显示配料列表：

{this.props.ingredientList.map(ingredient => {

              return (
                <li key={ingredient.id}>
                    <span>{ingredient.amount}</span>
                    <span>{ingredient.ingredient}</span>
                    <span ><button type='button' className='btn btn-danger' 
                    onClick={ this.props.removeIngredient }>X</button></span>
                </li>
              )
            })}

由于它的结构，我无法弄清楚如何传递父组件中delete prop的delete函数通常使用的id。

通常，我会这样做：

this.state.items.map(item => {
<List
handleRemoveItem={() => this.handleRemoveItem(item.id)} />

但是由于在父组件中没有任何映射，所以我无法传递ID。

因此，当我在removeIngredient函数中登录ID时，它显示为undefined。我知道那里。当我将其记录在add函数中时，会有一个id，当我在映射子组件中的每种成分时记录它时，它也在那里。我什至可以在删除成分按钮的onClick中访问它：

<button 
 type='button' 
 className='btn btn-danger' 
 onClick={ () => console.log(ingredient.id)}>Delete</button>

那也给了我id。

我只是无法确定如何在不使用父组件中进行映射的情况下传递它，但实际上在父组件中没有要映射的内容。当然传递“ this.state.id”只是给我一个初始状态，它是一个空字符串。

我们将非常感谢您的帮助，以帮助我了解如何执行此操作。预先感谢！

Answer 1

{this.props.ingredientList.map(ingredient => {

          return (
            <li key={ingredient.id}>
                <span>{ingredient.amount}</span>
                <span>{ingredient.ingredient}</span>
                <span ><button type='button' className='btn btn-danger' 
                onClick={ () => this.props.removeIngredient(ingredient.id) }>X</button></span>
            </li>
          )
        })}

Answer 2

我认为解决您的问题的方法是将ID 传递给 this.props.handleRemoveIngredient 函数，如下所示：

onClick={this.props.handleRemoveIngredient(ingredient.id)}

在您的示例中，您没有向函数传递成分ID，而是调用了 this.props.removeIngredient 函数，该函数不是prop /函数的正确名称。

Answer 3

没关系，只是想通了。

解决方案的确是onClick={ () => this.props.removeIngredient(ingredient.id) }

我的问题是，当我将props传递给子组件handleRemoveIngredient={this.handleRemoveIngredient}时，我将其作为不带参数handleRemoveIngredient={() => this.handleRemoveIngredient()}的函数传递，由于某种原因使id返回未定义。

感谢您的帮助！

如何在ReactJS中将delete函数作为道具传递

3 个答案: