我无法使用reselect筛选redux中的项目

fykwrbwg  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(120)

我正在做一个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
  }
)

顺便说一句,选择器没有问题。提前感谢!

vu8f3i0k

vu8f3i0k1#

const filterWords = filterText.split("")

将按字符而不是单词来分解字符串。我相信您需要:

const filterWords = filterText.split(" ")

相关问题