Reactjs 让孩子换父母'；s状态，它是一个数组

我知道如何让子级通过传递函数来控制父级的状态，我拥有的是一个状态等于：

ingredients: props.recipe ? props.recipe.ingredients : []

正在从数据库中传递数据，如果存在，将填充该数据库，如果找不到，则创建一个新数组。然后我有一个部分，其中每个成分数组的子元素都被映射：

this.state.ingredients.map((ingredient) => (
                    <IngredientListItem
                        key={ingredient}
                        name={ingredient}
                        handleRemoveIngredient={this.handleRemoveIngredient}
                    />
                )

this.state.components.map（（配料）=>(
)

在IngredientListItem中，我为this.props.name设置了一个新状态，以便在用户创建特定成分时输入错误时，我可以对其进行进一步操作。这样做，我可以自由编辑该成分的子版本，但我无法确定需要做什么才能将新成分值传递回parent，以便它可以将新值写入数据库

---

我遇到的问题源于编辑状态中数组的值。是否会使用类似于：///const index=indexOf（“示例成分”）///的方法来获取旧成分的位置，然后从那里更新它？我知道状态是不可变的，但我也不是100%如何使用shouldComponentUpdate（我相信这可以帮助我）。提前感谢您提供的任何帮助。

您需要的是父组件能够识别列表中的哪个子组件请求处理更新的数据。答案其实很简单：传递索引以及父组件完成更新所需的任何参数

this.state.ingredients.map((ingredient, index) => (
                    <IngredientListItem
                        key={index}
                        name={ingredient}
                        handleRemoveIngredient={(...args) => { this.handleRemoveIngredient(...args, index) }}
                    />
                )

this.state.components.map（（成分，索引）=>(
{this.handleremoveendent（…args，index）}
/>
)

---

另外，如果数组中有两个具有相同值的成分，则使用

成分作为键是不可接受的。如果不是这样，则可以。
请添加一些带有dummy的代码感谢响应，我会在有机会时处理它。另外，关于键，我设置了它，因此无法添加相同的成分，因此ld永远不会是重复的键。不过我喜欢你使用索引的方式。