React Native - useState 挂钩以更新数组对象中的数组答案

【问题标题】：React Native - useState hook to update array within an object of arraysReact Native - useState 挂钩以更新数组对象中的数组
【发布时间】：2020-03-24 13:52:43
【问题描述】：

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

【问题讨论】：

所以在那个函数中，你想从你的数组中找到相关的foodId/foodIndex（在我看来你可以使用任何一个）然后修改@中指定的fruitsArray索引987654330@?您是否要将指定的fruits 添加到现有的？ fruits 是多个水果的数组吗？如果是这样，那么您是从fruitIndex 开始添加/替换它们，还是有什么意图？
@James 在函数中，我试图使用fruits（这是一个单值参数）插入（或更新）到fruitsArray。我在想fruitIndex 可以帮助找出数组中的哪个索引来更新水果（让我们假设每个水果进入数组的特定顺序。foodIndex 的目的应该用于确保fruits 的值将变为正确的 foodId。我希望这更有意义？

标签： arrays reactjs react-native react-hooks

【解决方案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% 确定这就是您的意思。告诉我，我可以做相应的修改！

【讨论】：

我得到一个未定义的拼接。我认为这是因为fruitsArray 还不存在。我正在创建的数据还不存在。 foodData 只是说明数据的样子。
我在函数中更新了我的问题。我试图做的显示在那里。我遇到的问题是如何更新fruitsArray 而不会在每次调用函数时都被覆盖？

【解决方案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;

}

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

【讨论】：