Javascript React-使用状态对子组件数组进行排序

目前，我正在从事一个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>
  )
}

导出函数父函数（）{
const[children，setChildren]=useState([
{名称：'Orange'，值：2}，
{名称：'Apple'，值：1}，
{名称：'mellower'，值：3}
])
变量计数=0
函数handleSort（）{
var newChildren=[…children]
排序（（a，b）=>{returna.value-b.value}）
setChildren（newChildren）
}
返回(
分类
{children.map（（child）=>{
计数++
返回（）
})}
)
}

和一个子组件

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>
  )
}

function-ChildComp（道具）{
常量[intCount，setIntCount]=useState（0）
函数handleCount（）{
setIntCount（intCount+1）
}
返回(
{props.details.name}

{intCount}
)
}

---

当页面第一次呈现所有内容时，会呈现三个div，其中一个按钮显示单击的次数以及在数组中声明的道具名称。我注意到，当我排序时，它会对传递给子组件的道具进行排序，然后再重新渲染，但子组件的intCount状态保持与原始位置绑定，并且不会排序。有没有办法在保持子级状态数据的同时通过排序保持状态与数组元素的耦合，或者唯一的方法是将状态提升到父组件并向子组件传递回调或分派以更新它？

计数不未排序。当你分类时，它刚刚更新

键有助于识别哪些项已更改、已添加或已删除 远离的。应该为数组中的元素提供键，以便 元素是一个稳定的恒等式

每次排序时，

键

保持不变，就像使用

计数一样

尝试将
值
用作
键

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

导出函数父函数（）{
// ....
返回(
分类
{children.map（child=>{
return//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>
  )
}

导出函数父函数（）{
// ....
返回(
分类
{children.map（child=>{
return//key很重要
})}
)
}

<> >更多信息：
谢谢，你把它修好了，我甚至没有考虑过每次渲染时我都在重新创建密钥。谢谢你，修复了它，我甚至没有考虑过每次渲染时我都在重放密钥。