React下拉框选择后state无法立即更新问题求助

你的代码存在三个核心问题，导致筛选后listings无法即时更新：

1. selectedFilter类型不匹配
   初始值设为字符串""，但点击下拉项时传入的是数字类型的索引indx，类型不匹配可能引发逻辑判断异常，影响后续状态更新。

2. Array.sort()原地修改原数组
   listings.sort()会直接修改原数组，导致传给setListings的sorted和原listings是同一个引用。React依赖引用变化检测状态更新，这种情况无法触发重渲染，视图自然不会更新。

3. setState异步特性导致日志显示旧值
   setListings是异步操作，调用后立即console.log(listings)，打印的还是更新前的旧状态，并非最新值。

const dropdowns = [
    { icon: '', title: 'Top ratings', color: 'warning' },
    { icon: '', title: 'Worst ratings', color: 'warning' },
]
  
// 初始值改为数字类型，和后续传入的索引类型统一
const [selectedFilter, setSelectedFilter] = useState(-1);
const [listings, setListings] = useState(/* 填入你的初始listings数据 */);

useEffect(() => {
    // 未选中筛选器时直接返回（可根据需求调整）
    if (selectedFilter === -1) return;

    // 复制原数组后再排序，避免修改原数组引用
    const sortedListings = [...listings].sort((a, b) => {
        return selectedFilter === 0 ? b.rating - a.rating : a.rating - b.rating;
    });

    setListings(sortedListings);
    
    // 如需查看最新状态，可使用setState的回调方式
    // setListings(newList => {
    //   console.log(newList);
    //   return newList;
    // });
}, [selectedFilter, listings]);

// 下拉菜单部分无需修改
<Dropdown.Menu className='w-100'>
    {dropdowns.map(({ icon, title }, indx) => (
        <Dropdown.Item
            key={indx}
            as='button'
            eventKey={title}
            onClick={() => setSelectedFilter(indx)}
        >
            <i className={`${icon} fs-lg opacity-60 me-2`}></i>
            {title}
        </Dropdown.Item>
    ))}
</Dropdown.Menu>

• 若要在listings更新后执行逻辑，不要直接在setListings后写代码，可选择：
  1. 添加监听listings的useEffect
  2. 使用setListings的回调函数（如上注释中的写法）
• 务必给listings传入正确的初始数据，确保排序逻辑能正常运行。

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