我正在做一个react-redux项目。我的问题是我不能根据用户输入过滤来自API的项目。我使用了重新选择库,但没有工作。
下面是我的搜索组件:
function SearchComponent({ onClose, isOpen }) {
const dispatch = useDispatch()
const searchAnimes = useSelector(inputItems)
const filtered = createSelector(inputItems, (items, e) => {
const filterText = e.target.value.toLowerCase()
const filterWords = filterText.split("")
items.filter((item) => {
return filterWords.every((word) =>
item.title.toLowerCase().includes(word)
)
})
})
useEffect(() => {
dispatch(fetchInputData())
}, [dispatch])
return (
"... Some code"
<input
type="text"
placeholder="You can search for `Kyoukai no Kanata` for example"
onChange={filtered}
/>
{searchAnimes.map((el, id) => (
<div className="searchInput" key={id}>
<img src={el.images.jpg.small_image_url} alt="" />
<p>{el.title}</p>
</div>
))}
</div>
</Modal>
)
}
这是我的一部分:
export const fetchInputData = createAsyncThunk(
"anime/fetchInputData",
async () => {
const response = await axios.get(`${process.env.REACT_APP_API_KEY}?limit=5`)
// console.log(response.data.data)
return response.data.data
}
)
顺便说一句,选择器没有问题。提前感谢!
1条答案
按热度按时间vu8f3i0k1#
将按字符而不是单词来分解字符串。我相信您需要: