类型错误：无法读取未定义的属性(读取"防止默认")反应

Question

嗨，我的两次获取都得到了TypeError: Cannot read properties of undefined (reading 'preventDefault')。我有一个用于设置分页的usEffect。这似乎是问题所在，但我不确定如何解决这个问题。当我删除useEffect时，搜索有效，但分页无效，所以我有点困惑为什么会出现错误。

感谢您的帮助。

感谢

import React, {useState, useEffect} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Alert, Col, Row, ListGroup, Container } from 'react-bootstrap';
import { MovieCard } from '../Components/MovieCard';
import { CustomPagination } from '../Components/CustomPagination';

export const Search = () => {
const [page, setPage] = useState(1)
const [numOfPages, setNumOfPages] = useState();
const [query, setQuery] = useState("");
const [movies, setMovies] = useState([]);
const [show, setShow] = useState(true);
// eslint-disable-next-line
const [sayt, setSayt] = useState([]);

const fetchResults = e => {
e.preventDefault();
setQuery(e.target.value);
fetch(`https://api.themoviedb.org/3/search/movie?api_key=${process.env.REACT_APP_TMDB_KEY}&page=${page}&language=en-US&include_adult=false&query=${e.target.value}`
)
.then((res) => res.json())
.then((data) => {
if (!data.errors) {
console.log(data)
setSayt(data.results);   
}else{
<Alert variant="danger">Error</Alert>
}
})
}

const fetchSearch = e => {
e.preventDefault();
setQuery(e.target.value);
fetch(`https://api.themoviedb.org/3/search/movie?api_key=${process.env.REACT_APP_TMDB_KEY}&page=${page}&language=en-US&include_adult=false&query=${e.target.value}`
)
.then((res) => res.json())
.then((data) => {
if (!data.errors) {
console.log(data)
setMovies(data.results);  
setNumOfPages(data.total_pages); 
}else{
<Alert variant="danger">Error</Alert>
}
});
setShow((s) => !s)
}
useEffect (()=>{
fetchSearch();
fetchResults();
// eslint-disable-next-line
}, [page]) 
const saytShow = e => {
setShow((s) => !s)
}


return (
<div>
<div className="search-container">
<div className="row height d-flex justify-content-center align-items-center">
<div className="col-xs-12 col-sm-12 col-md-8 col-lg-8 my-4">
<form fetchSearch={fetchSearch} value={query}>
<div className="search"> <i className="fa fa-search" onClick={saytShow}></i> 
<input 
type="text" 
className="form-control" 
placeholder="Search for a movie..." 
onChange={fetchResults}
onClick={saytShow}
/> 
{sayt.length > 0 && (
<ListGroup className="sayt" style={{ display: show ? "block" : "none" }}>
{sayt.map(suggestions => (
<ListGroup.Item action type="submit" onClick={fetchSearch} value={suggestions.title}>
{suggestions.title}
</ListGroup.Item>
))}
</ListGroup>
)}
<button type="submit" onClick={fetchSearch} value={query} className="search-button btn btn-primary">Search</button> 
</div>
</form>

</div>
</div>
</div>
<Container fluid className="movie-grid">
{movies.length > 0 && (
<Row>
{movies.map(movieresults => (
<Col className="movie-grid" key={movieresults.id}>
<MovieCard movieresults={movieresults}/>
</Col>
))}
</Row>    
)}
</Container>
<CustomPagination setPage={setPage} numOfPages={setNumOfPages} />
</div>


)
}

Answer 1

当您在useEffect中调用fetchResults fetchSearch时，您没有event对象。只要写出正确的条件。示例：

const fetchResults = e => {
e && e.preventDefault() && setQuery(e.target.value);
fetch(`YOUR_URL?&query=${e ? e.target.value : query}`)
.then((res) => res.json())
.then((data) => {
if (!data.errors) {
console.log(data)
setSayt(data.results);   
}else{
<Alert variant="danger">Error</Alert>
}
})
}

与fetchSearch功能相同

Answer 2

尝试将按钮类型从submit更改为button。

<button type="button" onClick={fetchSearch} value={query} className="search-button btn btn-primary">Search</button>

这样就不需要阻止类型submit的默认功能。