Как добавлять элементы в список и упорядочивать по свойствам в React или React Native

Question 1

Я надеюсь поместить свои данные json в список, а затем добавить объекты в список и упорядочить все по местоположению

const [list, setList] = useState([])

const blocks = 4

const placeholder = [{ action : null, location : null, title : null }]

const json = [
  {
    "action": "go back",
    "location": 0,
    "title": "first Demo"
  },
  {
    "action": "press go",
    "location": 2,
    "title": "Second"
  }
]

Output I am hoping for when I console.log(list)

[
  {
    "action": "go back",
    "location": 0,
    "title": "first Demo"
  },
  {
    "action": "none",
    "location": 1,
    "title": "first Demo"
  }, 
  {
    "action": "press go",
    "location": 2,
    "title": "Second"
  },
  {
    "action": "none",
    "location": 3,
    "title": "first Demo"
  }
]

Что я пробовал. Это работает, но мне нужен лучший способ сделать это

const jsonValue = await AsyncStorage.getItem('@custom_layout');
      if (jsonValue != null) {
        const createPallet = Array.from({length: blocks}, (v, i) => ({
          title: null,
          icon: null,
          UUID: i,
          location: i,
          Children: [],
          action: null,
        }));

        JSON.parse(jsonValue).map((item, i) => {
          //Find index of specific object using findIndex method.
          const objIndex = createPallet.findIndex(
            obj => obj.location === item.location,
          );

          //Update object's.
          createPallet[objIndex] = item;

          // This will update your state and re-render
          setItems([...createPallet]);
        });

В основном мы получаем количество блоков. Затем мы переупорядочиваем json по местоположению. Если есть пробел от 0 до 3, заполните его данными-заполнителями

javascript reactjs react-native jsx

0

Jerry seigle 25 Ноя 2021 в 20:01

Вы еще что-нибудь пробовали? вы столкнулись с какой-либо проблемой?

–

Abu Sufian

25 Ноя 2021 в 20:13

Я пробовал использовать цикл и карту, но я новичок в кодировании, и это было очень грязно. И это не сработало. Я не могу обновить список. const myData = JSON.parse (jsonValue) let list for (let i = 0; i <blocks; i ++) {list.push (placeholder)} setItems (list)

–

Jerry seigle

25 Ноя 2021 в 20:24

Answer

Где вы устанавливаете список переменных const [list, setList] = useState([]) вы фактически устанавливаете его как пустой массив []. Но это только вопрос о терминологии. Вы можете отсортировать массив с помощью функции сортировки следующим образом. Но потерпите, я собираюсь переименовать его в массив.

const [array, setArray] = useState([]);

//Now you can add missing blocks.
for(let i=0; i<blocks; i++){
   if(!json.find(element=>element.location==i)){
      const newplaceholder = placeholder[0];
      newplaceholder.location = i;
      json.push(newplaceholder)
   }
}


//This is your sort function
const sortArray = (a, b)=>{
   return a.location-b.location
}

//When you want to use it to sort the array
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
json.sort(sortArray)

//Once you've added the placeholders and sorted the array
setArray(json);

0

user3665287 25 Ноя 2021 в 23:50

Question 2

Где вы устанавливаете список переменных const [list, setList] = useState([]) вы фактически устанавливаете его как пустой массив []. Но это только вопрос о терминологии. Вы можете отсортировать массив с помощью функции сортировки следующим образом. Но потерпите, я собираюсь переименовать его в массив.

const [array, setArray] = useState([]);

//Now you can add missing blocks.
for(let i=0; i<blocks; i++){
   if(!json.find(element=>element.location==i)){
      const newplaceholder = placeholder[0];
      newplaceholder.location = i;
      json.push(newplaceholder)
   }
}


//This is your sort function
const sortArray = (a, b)=>{
   return a.location-b.location
}

//When you want to use it to sort the array
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
json.sort(sortArray)

//Once you've added the placeholders and sorted the array
setArray(json);

0

user3665287 25 Ноя 2021 в 23:50

Как добавлять элементы в список и упорядочивать по свойствам в React или React Native

1 ответ

Похожие вопросы

Новые вопросы

javascript