React-状态为子组件的排序数组

Question

当前，我正在一个React项目上，但是在对有状态的子组件数组进行排序时，我看到一些意外的行为。

如果我有父组件

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呈现，并带有一个按钮，其中显示了单击的次数以及在数组中声明的prop名称。我注意到，当我进行排序时，它将对传递给子组件的props进行排序，然后将其重新呈现，但是子组件的计数状态与原始位置保持联系，并且未进行排序。有什么方法可以通过排序使状态与数组元素保持耦合，同时仍将状态数据保持在子级，或者是完成此操作的唯一方法是将状态提升到父级组件并传递回调或分派给孩子要更新吗？

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