React - сортировка массива дочерних компонентов по состоянию

Question

В настоящее время я работаю над проектом реагирования, но при сортировке массива дочерних компонентов с сохранением состояния я вижу неожиданное поведение.

Если у меня есть родительский компонент

export function Parent(){
  const [children, setChildren] = useState([
      {name:'Orange',value:2},
      {name:'Apple',value:1},
      {name:'Melon',value:3}
  ])
  var count = 0
  function handleSort() {
      var newChildren=[...children]
      newChildren.sort((a,b)=>{return a.value-b.value})
      setChildren(newChildren)
  }
  return (
      <div>
          <button onClick={handleSort}>Sort</button>
          {children.map((child) => {
            count++
            return(<ChildComp key={count} details={child}/>)
          })}
      </div>
  )
}

И дочерний компонент

function ChildComp(props){
  const[intCount,setIntCount] = useState(0)
  function handleCount(){
      setIntCount(intCount+1)
  }
  return (
      <div>
          <p>{props.details.name}</p>
          <button onClick={handleCount}>{intCount}</button>
      </div>
  )
}

Когда страница отображается в первый раз, все выглядит великолепно, три элемента div визуализируются с помощью кнопки, показывающей количество нажатий на нее и имя объекта, как оно было объявлено в массиве. Я заметил, что когда я сортирую, он сортирует реквизиты, передаваемые дочерним компонентам, которые затем перерисовываются, но состояние intCount дочернего компонента остается привязанным к исходному расположению и не сортируется. есть ли способ сохранить состояние, связанное с элементом массива, посредством сортировки, сохраняя при этом данные о состоянии на дочернем уровне, или это единственный способ выполнить sh, чтобы поднять состояние до родительского компонента и передать обратный вызов или отправить ребенку обновить его?

Answer 1

count не не отсортировано . Он только что обновился после сортировки.

Клавиши помогают React определить, какие элементы были изменены, добавлены или удалены. Необходимо дать ключи элементам в массиве, чтобы дать элементам стабильную идентичность

Каждый раз, когда вы сортируете, key остается тем же, как вы используете count.

Попробуйте использовать value как key

export function Parent(){
  // ....
  return (
      <div>
          <button onClick={handleSort}>Sort</button>
          {children.map(child => {
            return <ChildComp key={child.value} details={child}/> // key is important
          })}
      </div>
  )
}

Дополнительная информация: https://reactjs.org/docs/lists-and-keys.html#keys