Создавал компоненту поиска видео по названию, с переходом на новую страницу(по принципу ютуба)
Снова возникли вопросы, пытаюсь код внедрить в проект, на данный момент выдает ошибку
Коды следующие: В компоненте Header, который подключен к App и в котором осуществляется поиск:
import React, { useContext } from 'react';
import { Navbar } from 'react-bootstrap';
import { BrowserRouter, Route, Link } from "react-router-dom";
import './Header.scss';
import { MyContext } from '../../MyContext'
import { FeedContext } from '../../Pages/Feed/FeedContext'
import SearchDisplay from '../../Pages/SearchDisplay/SearchDisplay';
const SearchComp = ({ history }) => {
const { videos1 } = useContext(FeedContext)
console.log(videos1)
const [filter, setFilter] = React.useState("");
const searchButtonHandler = () => {
const filteredData = videos1.filter((item) =>
item.videoname.toLowerCase().includes(filter.toLowerCase())
);
history.push("/searchDisplay", filteredData);
};
return (
<div>
SearchDisplay
<input
type="text"
onChange={({ target: { value } }) => setFilter(value)}
value={filter}
/>
<button onClick={searchButtonHandler}>Search</button>
</div>
);
};
const Header = () => {
return (
<>
<Navbar fixed="top">
<Navbar.Brand href="/" >
<div className="LaT">
</div>
</Navbar.Brand>
<Navbar.Collapse id="responsive-navbar-nav">
<BrowserRouter>
<div className="search">
<SearchComp/>
</div>
</BrowserRouter>
</Navbar.Collapse>
</Navbar>
</>
)
}
export default Header;
Сама компонента SearchDisplay, где должен происходить вывод
import React, { useContext, useState, useEffect } from 'react';
import { Row, Col,} from 'react-bootstrap';
import {Redirect, Link} from 'react-router-dom';
import './SearchDisplay.scss';
import { MyContext } from '../../MyContext'
import Navigation from '../../layout/navigation/navigation';
import Header from '../../layout/header/Header';
const linkStyle = {
border: "1px solid black",
padding: "1rem",
margin: "1rem",
display: "block",
};
// const CabinetContext = React.createContext()
const SearchDisplay = ({ location, history }) => {
const data = location.state;
let [videos, setVideos] = useState([]);
let [error, setError] = useState(null);
const { isFetching } = useContext(MyContext)
useEffect(() => {
fetch('/api/user/my/favorites')
.then(response => response.json())
.then(result =>{
// console.log(result)
setVideos( result )
})
.catch(e => {
console.log(e);
setError(isFetching, e );
});
console.log('!!!',videos);
}, [])
if (error) return <div>{`Error: ${error.message}`}</div>;
if (isFetching) {
return <div>Loading...</div>
}
else
return (
<>
<Header />
<div className="Max">
<Row>
<Col sm={2}>
<Navigation key="navigation"/>
</Col>
<Col>
<div className="Box">
<div className="VideoList">
<h3>SearchResults</h3>
{data.map(({ _id, videoname }) => (
<Link key={_id} to={`/search/${_id}`} style={linkStyle}>
Video: {videoname}
</Link>
))}
</div>
</div>
</Col>
</Row>
</div>
</>
)
}
export default SearchDisplay;
Также в Header приходит массив из Видео, со страницы с общим списоком Роликов:
Пока не могу понять, в чем проблема, а их определенно несколько
UPDATE
код App, где рендерится SearchDisplay
import React, { lazy, useState, useEffect } from 'react';
import {BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom';
import './App.scss';
import {MyContext} from './MyContext'
import Feed from './Pages/Feed/Feed';
import Cabinet from './Pages/Cabinet/Cabinet';
// import Downloads from './Pages/Downloads/Downloads';
import Watch from './Pages/Watch/Watch';
import Favorites from './Pages/Favorites/Favorites';'
import SearchDisplay from './Pages/SearchDisplay/SearchDisplay';
import Subs from './Pages/Subs/Subs';
import History from './Pages/History/History';
...
const App = () => {
const [isAuthorized, setIsAuthorized] = useState(false)
const [isFetching, setIsFetching] = useState(true)
const [videos, setVideos] = useState({});
let [userData, setUserData] = useState({});
const [error, setError] = useState(null);
useEffect(() => {
fetch('/api/auth/isauthorized')
.then(result => result=result.json())
.then(result => {
// console.log("result", result);
if(result._id!==null){
setIsAuthorized(!isAuthorized);
setIsFetching(!isFetching);
setUserData(userData= result);
// console.log("userData", userData);
// this.setState({isAuthorized: true, isFetching: true, userData: result});
}else{
setIsAuthorized(isAuthorized);
setIsFetching(!isFetching);
// this.setState({isAuthorized: false, isFetching: true})
}
})
.then((result) => {
// console.log("result", result);
fetch('/api/videos/by/' + userData.nickname)
.then(response => response.json())
.then(response => {
// console.log("response", response);
setVideos(response)
// (!isFetching)
})
})
.catch(e => {
console.log(e);
setError(e);
//!isFetching
})
}, [])
if (error) return <div>{`Error: ${error.message}`}</div>; // ?????
if (isFetching ) {
return <img src={monkeyLoader} alt="Loading..." />
}
return (
<MyContext.Provider value={{
isAuthorized, isFetching, userData, videos
}} >
<Router>
<Switch>
<Route exact path="/" component={Feed} />
<Route exact path="/cabinet" component={Cabinet} />
{/* <Route exact path="/downloads" component={Downloads} /> */}
<Route exact path="/about" component={About}/>
<Route exact path="/watch:videoId" component={Watch} />
<Route exact path="/favorites" component={Favorites} />
<Route exact path="/searchDisplay" component={SearchDisplay} />
<Route exact path="/history" component={History} />
<Route exact path="/subs" component={Subs} />
<Route exact path="/downloadVideoPage" component={DownloadVideoPage} />
<Route exact path="/successRegistration" component={SuccessRegistration} />
{/* <Route exact path="/support" component={Support} /> */}
<Route exact path="/support"
render= {withSuspense(Support)}
/>
<Route exact path="/logreg1" component={Logreg} />
<Redirect to="/" />
</Switch>
</Router>
</MyContext.Provider>
);
}
export default App