React组件props变更后无法触发重渲染及数据排序问题求助

我需要在sortingCriteria props变化时，触发组件基于排序后的数据重渲染，但当前组件仅在初始状态渲染。props能正常传递，但修改后无法触发重渲染。我查阅了React官方文档，知道写法有误，但不知道怎么改。

我的代码实现 #

CreateFlightCards组件代码：

import React, { useEffect, useState, useMemo } from 'react';
import '../style.css'
import '../assets/css/bootstrap.min.css'


const CreateFlightCards = (props) => {
  const [card, setCard] = useState([]);
  const [cardLoaded, setCardLoaded] = useState(false);
 const [sortingCriteria, setSortingCriteria] = useState(props.sortingCriteria || 'default');

//initial state. this works as the code fetches data
useEffect(() => {   
  const fetchCardData = async () => {
      ...
     }
   if (!cardLoaded){
     fetchCardData()
       .then((flightCardsDataArray) => {
         setCard(flightCardsDataArray);
         setCardLoaded(true);
       })
       .catch((error) => {
         console.error('Error occurred while fetching data:', error);
       });
     }
   }, [cardLoaded]);

 //trigger state change using props
useEffect(() => {       
     setSortingCriteria(props.sortingCriteria || 'default');
   }, [props.sortingCriteria]);
      
  // function to sort data
 const sortData = (data, criteria) => {
       ....
       return data;
     };
   // this also triggers     
   const sortedData = useMemo(() => {
    return sortData(card, sortingCriteria);
    }, [card, sortingCriteria]);

if (!cardLoaded) {
  return <p>Loading...</p>;
}

//render or re render
const columns = sortedData.map((item, index) => {
var depAirline;
.....
return <>{columns}</>;

}
export default CreateFlightCards;

传递props的代码：

document.addEventListener('DOMContentLoaded', function () {
  const container = document.getElementById('range-wrapper'); // 
       ....
       ....           
        ReactDOM.render(
            <CreateFlightCards
              sortingCriteria={{ lowerRange, upperRange, sortBy}}
            />,
            document.getElementById('my-react-app')
          );
        console.log('After ReactDOM.render');
      }
    });
  }
});
export default CreateResultPageSortMenu;

补充排查：props变更时，const columns = sortedData.map((item, index).. 前的sortedData是空数组，但被调用的sortData函数能正确返回数据，导致props变更后无渲染；初始状态下sortedData正常，组件能正常渲染。

核心问题分析 #

1. 冗余状态同步：将props.sortingCriteria同步到本地sortingCriteria状态完全没必要，反而会引发状态不同步的问题——这正是React文档中提到的“不需要Effect的场景”。
2. 错误的props更新方式：通过重复调用ReactDOM.render更新props，本质是重新创建组件实例，旧实例的card状态不会被继承，这才是导致排序时sortedData为空的核心原因。

修复方案 #

步骤1：移除冗余状态，直接使用props #

删掉本地sortingCriteria状态和对应的同步Effect，直接用props.sortingCriteria参与排序计算：

修改后的CreateFlightCards关键代码：

const CreateFlightCards = (props) => {
  const [card, setCard] = useState([]);
  const [cardLoaded, setCardLoaded] = useState(false);

  // 初始数据获取逻辑保留
  useEffect(() => {   
    const fetchCardData = async () => {
        // ...你的数据获取逻辑
    }
    if (!cardLoaded){
      fetchCardData()
        .then((flightCardsDataArray) => {
          setCard(flightCardsDataArray);
          setCardLoaded(true);
        })
        .catch((error) => {
          console.error('Error occurred while fetching data:', error);
        });
    }
  }, [cardLoaded]);

  // 排序函数保留
  const sortData = (data, criteria) => {
    // ...你的排序逻辑
    return data;
  };

  // 直接依赖props.sortingCriteria，同时增加cardLoaded判断避免空数组
  const sortedData = useMemo(() => {
    if (!cardLoaded) return [];
    // 拷贝数组避免原数据被排序操作修改
    return sortData([...card], props.sortingCriteria || 'default');
  }, [card, cardLoaded, props.sortingCriteria]);

  // ...渲染逻辑保留
}

步骤2：用React状态管理替代重复渲染 #

不要通过DOMContentLoaded和重复ReactDOM.render更新props，改成用React组件状态控制排序参数：

重构CreateResultPageSortMenu为标准React组件：

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import CreateFlightCards from './CreateFlightCards';

const CreateResultPageSortMenu = () => {
  // 用React状态管理排序参数
  const [sortingCriteria, setSortingCriteria] = useState({
    lowerRange: 0,
    upperRange: 100,
    sortBy: 'default'
  });

  // 排序参数变更的处理函数（根据你的UI逻辑调整）
  const handleSortChange = (newLower, newUpper, newSortBy) => {
    setSortingCriteria({
      lowerRange: newLower,
      upperRange: newUpper,
      sortBy: newSortBy
    });
  };

  return (
    <div>
      {/* 这里放置你的排序UI组件（滑块、下拉框等），绑定handleSortChange */}
      <div id="range-wrapper">
        {/* ...你的排序交互元素 */}
      </div>
      {/* 直接传递状态给子组件，状态更新时自动触发重渲染 */}
      <CreateFlightCards sortingCriteria={sortingCriteria} />
    </div>
  );
};

// 只初始化渲染一次根组件
const root = ReactDOM.createRoot(document.getElementById('my-react-app'));
root.render(<CreateResultPageSortMenu />);

export default CreateResultPageSortMenu;

步骤3：校验sortData函数逻辑 #

确保sortData函数能正确处理传入的对象类型criteria（{ lowerRange, upperRange, sortBy }），并且当card有数据时，不会返回空数组。

修复原理 #

• 直接使用props.sortingCriteria避免了状态同步的延迟和不一致，useMemo会在props变化时自动重新计算排序后的数据。
• 通过React状态管理更新props，组件会遵循React的状态更新机制触发重渲染，子组件的card状态会被保留，排序时不会出现空数组。

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