React组件中mapStateToProps与mapActionsToProps未触发的问题求助

我一眼就发现了问题的核心——你的Redux Provider的位置放错了！

看你的App.js代码，Provider被嵌套在了Router内部，但实际上必须让Provider包裹整个Router，这样所有路由渲染的组件（包括Home里的SearchFilter）才能访问到Redux的store上下文。你的Counter组件能正常工作，就是因为它直接在Provider的范围内，而Home组件是通过Route渲染的，不在Provider覆盖的上下文里，自然connect完全失效，mapStateToProps根本不会执行。

修复步骤1：调整Provider和Router的层级 #

把Provider移到Router外面，让它包裹整个Router结构：

function App() {
  return (
    <Provider store={store}>
      <Router>
        <div className="App">
          <NavBar />
          <Counter />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/account" component={Account} />
          </Switch>
        </div>
      </Router>
    </Provider>
  );
}

修复步骤2：确认组件导入是否正确 #

还要检查Home.js里导入SearchFilter的方式：你必须导入默认导出的、已经被connect处理过的组件，而不是那个未连接的命名类组件。

正确的导入方式：

import SearchFilter from "../components/SearchFilter"; // 导入默认导出的连接后组件

错误的导入方式（会导致使用未连接的原始组件）：

import { SearchFilter } from "../components/SearchFilter"; // 导入命名导出的未连接组件

验证修复 #

做完这两步后重新运行项目：

• 打开React DevTools，查看SearchFilter组件，应该能看到它被Connect(SearchFilter)包裹
• mapStateToProps里的console.log(state)应该能正常输出Redux的state
• React DevTools的props面板里也能看到来自Redux的search prop和addSearchTerm方法

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