如何在 React 或 React Native 中将项目添加到列表并按属性排序答案

【问题标题】：How to add items to a list and order by property in React or React Native如何在 React 或 React Native 中将项目添加到列表并按属性排序
【发布时间】：2022-01-03 22:52:42
【问题描述】：

我希望将我的 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 之间有间隙，则用占位符数据填充它

【问题讨论】：

您尝试过什么了吗？你有什么问题吗？
我尝试了循环和映射，但我是编码新手，而且非常混乱。它也不起作用我无法更新列表。 const myData = JSON.parse(jsonValue) let list for (let i = 0; i

标签： javascript reactjs react-native jsx

【解决方案1】：

设置变量列表的位置 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);

【讨论】：