React Native - использовать ловушку для обновления массива в объекте массивов - PullRequest
Новая
       8

React Native - использовать ловушку для обновления массива в объекте массивов

0 голосов
/ 24 марта 2020

Как использовать useState ловушку для обновления массива в массиве объектов, который зависит от индекса массива?

данные конечной цели: 

foodData = [
  {
    foodId: 'fdsafsdafsa',
    fruitsArray: ['banana', 'orange']
  },
  {
    foodId: '234243fdsfdsafsasdf343432afsdafsa',
    fruitsArray: ['apple']
  },
  {
    foodId: 'fdsafsdafsa',
    fruitsArray: ['strawberry', 'orange']
  },
]

У меня есть функция с аргументами (fruits, fruitIndex, foodIndex, foodId)

const logFruitsIntoFoodData = (fruits, fruitIndex, foodIndex, foodId) => {
  // update state here...


  const foodToUpdate = {...foodData};

  foodToUpdate[foodIndex] = {
    ...foodData[foodIndex],

    // This gets overwritten, 
    // how do I continue to add or 
    // update the fruit based on fruit index? 
    ['fruitsArray']: fruits, 
  };


}

Я пытаюсь обновить / добавить фрукты в fruitsArray , поэтому при вызове функции она вставит нужные фрукты в foodData , или он обновит его, в зависимости от значения fruitIndex .

Следует ли использовать два отдельных useState: 

const [foodData, setFoodData]= useState([]);
const [fruitsArray, setFruitsArray] = useState([]);

где я должен сначала получить массив фруктов, а затем добавить его в foodData, или я могу просто использовать 1 useState для работы со всем?

Ответы [ 2 ]

0 голосов
/ 25 марта 2020

Мне удалось заставить его работать, когда я сделал это так: 

const [foodData, setFoodData]= useState([]);

const logFruitsIntoFoodData = (fruits, fruitIndex, foodIndex, foodId) => {

  // checks if the index exists in the array.

  if (!foodData[foodIndex]) {
    foodData[foodIndex] = {
      foodId,
      fruitsArray: [],
    };
    setFoodData({...foodData});
  }

  // now I can insert fruits depending on the fruitIndex
  foodId[foodIndex].fruitsArray[fruitIndex] = fruits;

}

Не уверен, что это лучший метод, но он работает. Если у кого-то есть способ получше, я бы с удовольствием его услышал!

0 голосов
/ 24 марта 2020

Я не уверен, что использовал бы массив, поскольку у вас есть foodId, что означает, что вы можете легко преобразовать foodData в объект. Я бы сказал, если вы используете массив, то используйте индекс. Если вы хотите использовать foodId для идентификации элемента, который вы обновляете, просто сделайте foodData объектом.

Это немного громоздко, но я думаю, вы пытаетесь это сделать: 

const logFruitsIntoFoodData = (fruit, fruitIndex, foodIndex) => {
  // isolate the food you're updating and clone it

  const foodToUpdate = { ...foodData[foodIndex] };

  // replace fruit in the specified index...

  foodToUpdate.fruitsArray.splice(fruitIndex, 1, fruit);

  // clone existing state

  const newFoodDataState = [...foodData];

  // replace the item in the specified

  newFoodDataState.splice(foodIndex, 1, foodToUpdate);

  // set new state

  setFoodData(newFoodDataState);
};

Я не уверен на 100%, что вы имели в виду. Дайте мне знать, и я могу изменить соответственно!

...