我在搜索输入组件中遇到了一个奇怪的bug,每次按键都会失去焦点,但我不知道原因。
const App = () => {
let [characters, setCharacters] = useState([]);
let [filteredCharacters, setFilteredCharacters] = useState([]);
// more state
let [search, setSearch] = useState("");
useEffect(() => {
setIsLoading(true);
axios
.get(`https://swapi.co/api/people/?page=${pageNumber}`)
.then(res => {
console.log(res.data.results);
setCharacters(res.data.results);
setFilteredCharacters(res.data.results);
})
.catch(err => console.error(err))
.then(() => {
setIsLoading(false);
});
}, [pageNumber]);
function updatePage(e) {
// update page
}
function handleSearch(e) {
setSearch(e.target.value);
const filtered = characters.filter(character => {
if (character.name.toLocaleLowerCase().indexOf(e.target.value) !== -1) {
return character;
}
});
setFilteredCharacters(filtered);
}
function SearchBar() {
return (
<React.Fragment>
<StyledInput
type="text"
id="search"
value={search}
placeholder="Search by name..."
onChange={e => handleSearch(e)}
/>
</React.Fragment>
);
}
return (
<React.Fragment>
<GlobalStyles />
<div className="App">
<Heading>React Wars!</Heading>
<SearchBar />
<Pagination handleClick={updatePage} />
{!isLoading && Object.entries(filteredCharacters).length ? (
<CharacterList characters={filteredCharacters} />
) : (
<LoadingBar />
)}
</div>
</React.Fragment>
);
};
我还遇到一个问题:Line 65:50: Expected to return a value at the end of arrow function array-callback-return
,这可能与characters.filter()
有关。
如果有帮助的话,可以在这里查看存在错误的应用程序-->https://mundane-vacation.surge.sh
SearchBar
的onChange
调用handleSearch
,后者调用setSearch
,从而更改状态值,从而导致重新渲染(包括SearchBar
子元素本身的重新渲染)。查看其他类似问题的解决方法,请参考以下链接:https://dev59.com/R1gQ5IYBdhLWcg3wkEtJ - Jayce444function SearchBar() {
,所以它是一个全新的组件,每次都会被重新评估和渲染。你可以省略它,并将StyledInput
内容注入到<SearchBar />
的位置,这样应该会有所帮助。 - Derek