如何使用 useState 打乱嵌套数组

Question

我正在用 React Native 制作一个测验应用，我想打乱问题的顺序每次有人选择测验时 .我正在考虑使用 lodash 中的 shuffle，但我不确定如何处理嵌套数组。

const getTest = async () => {

     try {
        const response = await fetch('https://tgryl.pl/quiz/test/'.concat(route.params.testId));
        const json = await response.json();
        setData(json);
     }
     catch (error) {
          console.error(error);
     } 
}

我在想 setData(_.shuffle(data.tasks)) 之类的东西？？我不知道

JSON 看起来像这样

Answer 1

显然，要打乱的数组存储在响应对象的 tasks 属性中，因此您应该打乱该数组并将其分配回属性:

json.tasks = _.shuffle(json.tasks);
setData(json);

尽管这会改变一个对象然后将其传递给 setData（大概会调用 setState/useState，并且这种改变通常是一种代码味道），但这并不是这里有一个问题，因为这个对象以前从未用于状态。

无关，但我不会称该变量为 json。它是一个 JavaScript 对象。 JSON 是 json() 方法从请求中检索并转换为 object/array.

的文本格式的术语

使用描述内容的名称，例如 quiz。

Answer 2

您没有嵌套数组，您在对象内部有数组。这就是您收到的响应数据结构。

我认为这是一个有趣的问题，所以在这里我实现了另一种打乱问题数组的方法。

逻辑

循环遍历所有问题及其内部：

生成一个介于 0 和问题数组长度之间的随机索引。
使用 pop() 删除数组的最后一个元素，然后 return 将其添加到 Q 变量。
使用splice()将问题Q添加到生成的随机索引中。

const arr1 = [];
const arr2 = [
        {question: 'asd asd 1', answer: 'bla 1', duration: 10},
        {question: 'asd asd 2', answer: 'bla 2', duration: 20},
        {question: 'asd asd 3', answer: 'bla 3', duration: 15},
        {question: 'asd asd 4', answer: 'bla 4', duration: 30}
      ];
const arr3 = [];

const responseObject = {
  arr1,
  arr2,
  arr3
};
      
let questions = responseObject.arr2;

for(const question of questions){
  let randIndex = Math.round(Math.random()*(questions.length - 1));
  let Q = questions.pop(); 
  questions.splice(randIndex, 0, Q);
}

console.log(questions)

如何使用 useState 打乱嵌套数组

How to shuffle nested array with useState

javascript

lodash

react-native

逻辑