时间戳

首页 > 解决方案 > React - 对具有状态的子组件数组进行排序

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

标签： javascriptreactjssortingreact-component

解决方案

countis not未排序。它刚刚在您排序时更新。

键帮助 React 识别哪些项目已更改、添加或删除。应为数组内的元素提供键，以使元素具有稳定的身份

每次排序时，key保持不变，就像使用count.

尝试使用valueaskey

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

推荐阅读