React排序列表组件时子组件内部state未同步更新问题

排序后子组件状态错位、数据不匹配是三个典型React使用错误导致的：

• 动态列表使用数组下标index作为子组件的key属性，React无法正确识别列表项的身份，排序时直接复用原有位置的组件实例，保留了旧的内部state
• 调用Array.sort()时直接修改了state中的原数组，没有生成新的数组引用，不符合React不可变数据的更新要求
• 类组件中重复定义了两次state，属于冗余代码容易引发不可预期的问题

1. 替换列表key为数据唯一标识 #

把列表渲染时的key={index}替换为每条数据固定不变的唯一id，也就是你数据里的element.id，修改render方法里的map部分：

{this.state.bonus.map((element) => (
  <AccordionItemSlot
    key={element.id}
    proccessID={element.id}
    title={element.name}
    targeruser='gutierad5'
    createDate={FormatDateInYYMMDD(element.createdAt)}
    status={element.status}
    creator={element.creator}
    links={element.links}
    amount={element.processBonus.amount}
    updatedAt={element.updatedAt}
    password={element.processBonus.password}
    franchise={element.processBonus.franchise}
  />
))}

React通过key值判断列表项的对应关系，使用下标当key时，排序后位置0的key永远是0，React会认为这个位置的组件没有变化，直接复用之前的组件实例和内部state，就会出现date字段排序正确、其他字段和内部state停留在原位置的错位问题。

2. 修复排序逻辑，遵循不可变数据原则 #

Array.sort()是原地修改方法，会直接改动原数组，排序前要先拷贝原数组生成新的引用，同时把两次setState合并为一次，避免重复渲染。
把原来的sortFunction替换为：

sortFunction() {
  // 先浅拷贝原数组，避免直接修改state中的原数据
  const sortedList = [...this.state.bonus].sort((a, b) => {
    const timeA = new Date(a.createdAt).getTime();
    const timeB = new Date(b.createdAt).getTime();
    return this.state.order === "asc" ? timeB - timeA : timeA - timeB;
  });

  this.setState({
    bonus: sortedList,
    order: this.state.order === "asc" ? "desc" : "asc"
  });
}

同时删掉类组件中constructor外面冗余的state定义，只保留constructor里的state初始化即可，避免重复声明引发冲突。

3. 子组件细节优化（非必须，但建议修复） #

• 子组件内的React.createContext定义不要放在组件函数内部，否则每次渲染都会生成新的Context实例，要把这行移到组件函数外层
• 如果需要父组件传入的status变化时同步更新子组件内部state，可以加一个监听effect：

// AccordionItemSlot组件内
const [state, setState] = useState(props.status);

// 新增：同步props传入的status变化
useEffect(() => {
  setState(props.status);
}, [props.status]);

改完以上内容，排序时React就能根据唯一key正确匹配每个数据项对应的子组件，内部state也会跟随正确的数据项移动，不会再出现错位问题。

内容的提问来源于stack exchange，提问作者Sotovision4K