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 呈现一个按钮，显示它被点击的次数和在数组中声明的道具名称。 我注意到，当我排序时，它对传递给子组件的 props 进行排序，然后重新渲染，但是子组件的 intCount 状态保持与原始位置相关并且没有排序。 有什么方法可以通过排序保持状态与数组元素耦合，同时仍然在子级别保持状态数据，或者是唯一的方法来实现这一点以将状态提升到父组件并将回调或分派传递给孩子更新了吗？

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