React.js中关键词显示undefined问题排查求助

问题场景 #

在React项目的SearchView组件中，期望显示You are searching for (输入的关键词)，但实际渲染结果为You are searching for undefined。

问题原因 #

在App.js的Route组件中，错误地将keyword和searchResults作为Route自身的属性传递，而React Router的Route组件不会自动将这些属性转发给其element属性指定的组件。因此SearchView组件无法接收到预期的keyword参数，导致显示undefined。

解决步骤 #

修改App.js中对应Route的写法，直接将需要传递的props传入SearchView组件：

修改后的App.js Route部分代码 #

<Routes>
  <Route exact path="/" element={<Home/>}/>
  <Route exact path="/about" element={<AboutView/>}/>
  {/* 直接将props传入SearchView组件 */}
  <Route exact path="/search" element={<SearchView keyword={SearchText} searchResults={searchResults} />} />
</Routes>

验证逻辑 #

• 确保Navbar组件正确调用setSearchText更新App组件中的SearchText状态，可以通过useEffect中的console.log(SearchText)确认关键词是否正确同步。
• 修改后，SearchView组件的keyword参数将正确接收App组件中的SearchText值，渲染出预期的文本内容。

补充说明 #

如果需要通过URL参数传递关键词（比如/search?query=xxx），可以使用useSearchParams钩子，但当前场景下直接通过组件props传递状态值是更直接的方案。

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