Question

我想将 useSelector 与 useEffect 一起使用，因为 dispatch(searchEvents(location.search)) 返回一个承诺，只有在承诺解决后，我才能使用 useSelector() 的 react-redux 钩子，因为 dispatch from useDispatch() from react-redux将更新我将用来呈现我的列表的 redux 存储


const [text, setText] = useState("");
  const [priceFilter, setPriceFilter] = useState("");
  const [eventsList, setEventsList] = useState([]);

 const FetchingEventsList = () => {
     const eventsArray = useSelector((state) => Object.values(state.event));
  setEventsList(eventsArray);
   };
 

  useEffect(() => {
    dispatch(searchEvents(location.search))
      .then(() => {
      FetchingEventsList()
  
 
      })
      .catch((err) => {
        console.log(err);
      });
  }, [location.search]);

Answer 1

将useSelector移出useEffect

const [text, setText] = useState("")
const [priceFilter, setPriceFilter] = useState("")
const [eventsList, setEventsList] = useState([])
const eventsArray = useSelector((state) => Object.values(state.event))

useEffect(() => {
    dispatch(searchEvents(location.search))
    .then(() => {
        setEventsList(eventsArray)
    })
    .catch((err) => {
        console.log(err)
    });
}, [location.search])

我认为你不需要 eventsList，所以你的代码看起来像

const eventsArray = useSelector((state) => Object.values(state.event))

useEffect(() => {
    dispatch(searchEvents(location.search))
}, [location.search])

React 钩子只在函数 root 中工作。所以你不能在另一个钩子中使用钩子。当您分派 searchEvents 时，我可以在您的代码中看到您应该更新您的商店，因此 useSelector 挂钩应该更新您组件中的 eventsArray。那么我认为您不需要创建新的 eventsList 变量。

useSelector 只能在函数组件内部定义

1 个答案: