我正在构建一个配方应用程序，但删除功能出现问题。
它的工作原理是点击"添加配方"按钮，弹出一个模式，让你为新配方填写一些输入字段。该表单中有一个配料字段和一个"添加配料"按钮。您单击"添加"，配料就会添加到配料列表中。它的行为与todo列表完全一样，但它位于表单组件内部。我还希望能够去除一种成分。
我的应用程序组件的结构如下：
- 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})
}
在child组件中，它在显示ingredientsList:的<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道具的delete函数中传递的id。
通常，我会这样做：
this.state.items.map(item => {
<List
handleRemoveItem={() => this.handleRemoveItem(item.id)} />
但是由于父组件中没有映射任何内容，因此我无法传递id。
因此，当我在removeIngredient函数中记录id时，它会显示为未定义。我知道它在那里。当我在add函数中记录它时，会有一个id，当我在映射子组件中的每个成分时，它也在那里。我甚至可以在点击删除成分按钮时访问它：
<button
type='button'
className='btn btn-danger'
onClick={ () => console.log(ingredient.id)}>Delete</button>
这也给了我身份证。
我只是无法思考如何在不映射父组件的情况下传递它，但实际上在父组件中没有任何映射。当然，传递"this.state.id"只会给我一个空字符串的初始状态。
任何帮助都将不胜感激，帮助我了解如何做到这一点。提前感谢！
我认为问题的解决方案是将ID传递给this.props.handleRemoveIngredient函数，如下所示：
onClick={this.props.handleRemoveIngredient(ingredient.id)}
在您的示例中，您没有将配料id交给函数，而是调用了this.props.removeIngredient函数，这不是prop/函数的正确名称。
没关系，只是想明白了。
解决方案确实是onClick={ () => this.props.removeIngredient(ingredient.id) }
我的问题是，当我将props传递给子组件handleRemoveIngredient={this.handleRemoveIngredient}时，我将其作为一个没有参数handleRemoveIngredient={() => this.handleRemoveIngredient()}的函数传递，出于某种原因，这使得id返回时未定义。
谢谢你的帮助！！
{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>
)
})}