我试图访问一个关键字,以显示“您正在搜索(任何关键字)”,但它显示“您正在搜索未定义”。你能找出问题所在吗?在此先谢谢您!
App.js:
import './App.css';
import {useState, useEffect} from 'react'
import Navbar from './components/Navbar';
import Home from './components/Home';
import AboutView from './components/AboutView';
import SearchView from './components/SearchView'
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
function App() {
const [searchResults, setSearchResults] = useState([]);
const [SearchText, setSearchText] = useState('');
useEffect(() => {
console.log(SearchText, "is the search text")
fetch(`https://api.themoviedb.org/3/search/movie?api_key=ab166ff82684910ae3565621aea04d62&language=en-US&query=${SearchText}&page=1&include_adult=false`)
.then(response => response.json())
.then(data =>{
console.log(data)
setSearchResults(data.results)
}
)
}, [SearchText])
return (
<div>
<Navbar SearchText={SearchText} setSearchText={setSearchText}/>
<Routes>
<Route exact path="/" element={<Home/>}/>
<Route exact path="/about" element={<AboutView/>}/>
<Route keyword={SearchText} searchResults={searchResults}exact path="/search" element={<SearchView/>} />
</Routes>
</div>
);
}
export default App;
字符串
SearchView.js元素:
import Hero from "./Hero";
const SearchView = ({ keyword, searchResults }) => {
const title = `You are searching for ${keyword}`
console.log(searchResults, "are the search results")
return (
<>
<Hero text={title}/>
</>
);
};
export default SearchView;
型
qwertyuiopasdfghjklzxcvbn
1条答案
按热度按时间gxwragnw1#
您应该将SearchView prop 传递给正在渲染的
element
中的渲染 prop ,而不是Route。类似这样的东西应该可以工作:字符串