0

有一个用于单击的事件处理程序，当它触发时，我想使用选择器从 redux 中提取特定数据，其中所有逻辑多对多都已实现。我需要将 id 传递给它以接收其个人数据。根据反应规则，可以在既不是 React 函数组件也不是自定义 React Hook 函数的函数中调用钩子。

那么解决我的问题的方法是什么？

const handleMediaItemClick = (media: any): void => {
    // For example i check media type and use this selector to pull redux data by id
    const data = useSelector(playlistWithMediaSelector(imedia.id));
};
4

2 回答 2

0

您可能应该使用本地状态值来跟踪它。

const Component = () => {
  const [imediaId, setImediaId] = useState(null);

  const data = useSelector(playlistWithMediaSelector(imediaId));

  function handleMediaClick(id) {
    setImediaId(id)
  }

  useEffect(() => {
    // do something on data
  }, [imediaId, data])

  return <div>...</div>
}

这有帮助吗？

编辑：我认为您想要做的是能够在您需要的地方调用选择器。类似（考虑上面的代码）data(id)在handleMediaClick. 我敢打赌你必须从返回一个咖喱​​函数useSelector，而不是值。然后你会打电话给它。唉，我还没有弄清楚如何做到这一点，如果它完全可能，以及它是否是一个可接受的模式。

于 2022-01-25T19:05:34.913 回答
0

如错误消息中所述，您不能在函数内部调用钩子。您在功能组件内调用钩子并在函数内使用该值。useSelector每次状态更改并呈现该组件时，挂钩都会更新变量。

另外，当你用 获取数据时useSelector，你应该从 redux 状态写下你需要的 reducer 名称。

 const CustomComponent = () => {
      // The data will be updated on each state change and the component will be rendered
      const data = useSelector((state) => state.REDUCER_NAME);

      const handleMediaItemClick = () => {
          console.log(data);
      };
 }

您可以查看此页面以获取更多信息。https://react-redux.js.org/api/hooks#useselector

于 2021-09-24T22:43:05.747 回答