Попросите ребенка изменить родительское состояние, которое является массивом
Я знаю, как сделать так, чтобы дочерний элемент контролировал состояние родителя, передавая функцию, у меня есть родительский элемент с состоянием, равным:
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 ("пример ингредиента") ///, чтобы получить, где старый ингредиент затем обновляет его оттуда? Я знаю, что состояние неизменяемо, но я также не на 100% знаю, как использовать shouldComponentUpdate (который, как я считаю, может мне помочь). Заранее благодарим за любую предоставленную помощь.
Ответы 1
Что вам нужно, так это способ, чтобы родительский компонент мог определить, какой дочерний элемент в списке отправляет запрос на обработку обновленных данных. Ответ на самом деле прост: передайте индекс вместе с любыми параметрами, которые требуются родителю для завершения обновления.
this.state.ingredients.map((ingredient, index) => (
<IngredientListItem
key = {index}
name = {ingredient}
handleRemoveIngredient = {(...args) => { this.handleRemoveIngredient(...args, index) }}
/>
)
P.S. Использование ingredient в качестве ключа недопустимо, если в массиве есть два ингредиента с одинаковым значением. Если это не так, тогда все в порядке.
Спасибо за ответ, поиграю, когда будет возможность. Кроме того, что касается ключа, я установил его так, чтобы тот же ингредиент нельзя было добавить, чтобы никогда не было дублированного ключа. Однако мне нравится ваш способ использования индекса.
Пожалуйста, добавьте код с фиктивным