Question

如何使用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来处理所有事情？

Answer 1

我不确定是否要使用数组，因为您有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％肯定这就是您的意思。让我知道，我可以进行相应的修改！

Answer 2

当我这样做时，我就能使它工作：

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;

}

不确定这是否是最好的方法，但是它可以工作。如果有人有更好的方法，我很想听听！

React Native-useState钩子更新数组对象中的数组

2 个答案: