Question

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

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

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

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

在IngredientListItem内部我为this.props.name设置了一个新状态，这样如果用户在创建特定成分时输入了拼写错误，我就可以进一步操作它。这样做我可以自由编辑孩子的成分是什么版本，但我无法弄清楚我需要做什么才能将新的成分值传递给父母，以便它可以将新值写入数据库。

我遇到的问题源于在一个州内编辑数组的值。它会使用类似于：/// const index = indexOf（“example ingredient”）///来获取旧成分然后从那里更新的地方吗？我知道状态是不可变的，但我也不是100％如何使用shouldComponentUpdate（我相信它可以帮助我）。提前感谢您提供的任何帮助。

Answer 1

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

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

P.S。如果数组中有两个具有相同值的成分，则不能使用ingredient作为键。如果情况并非如此，那就没关系。

让孩子改变父亲的状态，这是一个数组

1 个答案: