Question

我正在新的React应用程序上尝试不同的模式，在这种情况下，我有一个redux存储，其中包含一个对象的项目数组。当组件加载时，我将调度一个新操作，该操作将获取所有项目并使用新值设置商店，在这种情况下，列表将正确显示。当我从相同组件的子组件中分派相同的动作时，redux状态会更新，主要组件会重新呈现，但列表保持不变。

export const ProjectList: React.FC = () => {
//When projects change the component should rerender with the new store
  const { projects, isLoading, errors } = useSelector((store: IAppState) => store.projectState);
  const dispatch = useDispatch();
  const { setActiveProject } = useActiveProjectValue();
  const { setIsNewTask } = useIsNewTaskValue();

useEffect(() => {
    console.log('called');
    dispatch(getProjectsAction());
  }, []);

  return (
    <div className="ProjectList">
      {!isLoading ? (
        projects.map((project: IProject) => (
          <ProjectListItem
            key={project.docId ? project.projectId : uuid()}
            handleClick={() => handleClick(project)}
            project={project}
          >
            {project.name}
          </ProjectListItem>
        ))
      ) : (
        <p>Loading projects</p>
      )}
      {errors && <p>{errors}</p>}
    </div>
  );
};

我还尝试用useMemo更改useEffect并向此函数添加项目依赖项，在这种情况下，它可以正常工作，但似乎触发了动作太多次了：

useEffect(() => {
    dispatch(getProjectsAction());
  }, [projects]);

有什么建议/解决方案吗？谢谢！

在redux状态更改时，反应多次调用useMemo或useEffect

0 个答案: