使用 useSelector 和 useDispatch 反应功能组件创建循环答案

【问题标题】：React functional component with useSelector and useDispatch creates loop使用 useSelector 和 useDispatch 反应功能组件创建循环
【发布时间】：2020-09-24 21:47:27
【问题描述】：

我确定这是我的大脑无法理解的情况......但是......

我习惯于使用类组件而不是一般的功能组件，并且使用 React Redux 我正在尝试编写一个调度操作的组件。正如您可能知道的那样，该操作当然会导致 reducer 更新 Redux 状态（存储）。尝试用 useSelector 和 useDispatch 替换 mapStateToProps 和 mapDispatchToProps 却让我创建了一个循环......我猜我使用 useSelector 不正确。

import { fetchPostsByTerm } from "../../_actions/_postActions";
import { useSelector, useDispatch } from "react-redux";

const payload = { vocabulary: "tags", term: "thiphif" };

export const PostsByTerm = () => {
  const dispatch = useDispatch();
  dispatch(fetchPostsByTerm(payload));
  const posts = useSelector((state) => state.postsByTerm);

  return (
    <div>
      <h1 className="post_heading">Posts</h1>
      {posts ? posts.map((post) => <h1>{post.entityLable}</h1>) : <h1>no posts</h1>}
    </div>
  );
};

也许我使用正确？同一页面上还有其他组件在更新状态

【问题讨论】：

标签： reactjs redux react-functional-component

【解决方案1】：

您不能直接在功能组件中调度。而是使用 useEffect 挂钩来执行调度。如果您的目标是仅在初始渲染时调度操作，请将依赖项作为空数组传递给 useEffect

export const PostsByTerm = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchPostsByTerm(payload));  
  }, [])

  const posts = useSelector((state) => state.postsByTerm);

  return (
    <div>
      <h1 className="post_heading">Posts</h1>
      {posts ? posts.map((post) => <h1>{post.entityLable}</h1>) : <h1>no posts</h1>}
    </div>
  );
};

【讨论】：

啊，好吧...我不明白 useEffect 是如何工作的，因为我尝试过并忽略了依赖项，然后它循环了。谢谢它现在正在工作。
很高兴能帮上忙

【解决方案2】：

仅供参考 - 在这里发表评论是因为对我来说这是一个“啊哈”时刻，我了解了 useEffect 实用程序中数组 [] 的用途。该数组用于容纳状态变量，当更改时，将强制执行列出的函数。所以在我的情况下，实际上因为我希望 fetchPostsByTerm 在所选术语更改时执行（不明显，因为我的示例显示它是硬编码的）

  useEffect(() => {
    dispatch(fetchPostsByTerm(payload));  
  }, [term])

...是我最终选择的。现在它工作得很好！选择新术语时获取所选术语的文章。

【讨论】：