after sort, the ui not render with new data-CodePudding

im trying to list out the list after sort by status. This is my code, it can be sort in order.But the problem is, at the ui screen, it still previous value which it not render after do sorting.

const [listData, setListData] = useState(null)
let statusOrder={
  'Active':1,
  'In progress'
}
  
let list=[
  {
    sample: '1',
    data:[
      {
        name:'name1', 
        status:'In Progress'
      },
      {
        name:'name2',
        status:'Active'
      }
    ]
  },
  {
    sample:'2',
    data:[
      {
        name:'name1', 
        status:'In Progress'
      },
      {
        name:'name2',
        status:'Active'
      }
    ]
    }
  ]
  
const function = () => {
  setListData(list)
  for(let i=0; i<listData.length; i  ){
    listData[i].data.sort(a,b) => statusOrder[a.status] - statusOrder[b.status]

    if((index 1) == listData.length)
     setData(listData)
  }
}

useEffect(() => {
  sort()
},[])

I already try this approach, but still not render.

setListData([].concat(listData[i].data).sort((a, b) => statusOrder[a.status] - statusOrder[b.status]))

CodePudding user response：

Like mentioned in the comments you're not really setting a new state since the "new" state is the same object as the old one.

Your function is called function which is a reserved keyword in the JS. So I assume you mean sort like you're using in your useEffect.

To handle the sort or your list you can try this

const sort = () => {
  // give a callback to the setState which receives the prevState
  setListData((prevListData) => {
    // map over the prevState which returns a new array
    const newListData = prevListData.map((item) => {
      // return a new object with the item and sorted data
      return {
        ...item,
        data: item.data.sort(
          (a, b) => statusOrder[a.status] - statusOrder[b.status]
        ),
      };
    });
    return newListData;
  });
};