React组件状态变更后未重新渲染问题求助

你直接在组件中调用store.getState()，这种方式不会让组件订阅Redux状态的变化。组件只会在首次渲染时读取一次状态值，后续Redux store更新时，组件无法感知到变化，自然不会触发重新渲染。只有切换路由导致组件重新挂载时，才会再次调用store.getState()拿到最新值。

1. 使用React-Redux的useSelector钩子（推荐） #

这是Redux官方推荐的组件获取状态方式，它会自动订阅目标状态的变化，当状态更新时自动触发组件重渲染。

先确保已安装react-redux，然后修改Header组件：

import { useSelector } from 'react-redux'; // 导入useSelector钩子

function Header() {
  // 订阅Basket数组的length变化
  const basketItemCount = useSelector(state => state.Basket.length);

  return (
    <div id="Header">
      <Link to='/' style={{ display: 'flex',textDecoration: 'none', color: '#000' }}>
        <div className='Header_Pole'>
          <img src={logo} alt='Logo' className='Header_Pole_img'/>   
        </div>
      </Link>
      <Link to='/basket' style={{ display: 'flex',textDecoration: 'none', color: '#000' }}>
        <div className='Header_Pole'>
          <img src={shoppingBasketIcon} alt='Basket' className='Header_Pole_img'/> 
          <p className='itemsCounter'>{ basketItemCount }</p> {/* 替换为订阅后的状态值 */}
        </div>
      </Link>
    </div>
  )
}

export default Header;

2. 检查Reducer是否符合Redux规范 #

Redux要求reducer必须是纯函数，绝对不能修改原状态，必须返回新的状态对象/数组。如果你的basketReducer处理addtoBASKET时直接修改了原数组（比如用state.push()），会导致Redux无法检测到状态变化，进而不会通知组件更新。

正确的reducer写法示例：

const initialState = [];

function basketReducer(state = initialState, action) {
  switch(action.type) {
    case 'addtoBASKET': // 注意与dispatch的type值保持一致
      // 返回新数组，避免修改原state
      return [...state, action.item];
    // 其他状态处理逻辑...
    default:
      return state;
  }
}

3. 确认组件在Redux Provider包裹下 #

保证你的根组件（如App.js或index.js）已经用Provider包裹，这样所有子组件才能正常访问Redux store：

import { Provider } from 'react-redux';
import { store } from './你的store文件路径';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

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