Question

在useEffect挂钩中从Redux存储获取状态的正确方法是什么？

    useEffect(() => { 
        const user = useSelector(state => state.user);
    });

我正在尝试获取useEffect中的当前状态，但是我无法使用useSelector调用，因为这会导致错误说明：

Invariant Violation: Hooks can only be called inside the body of a function component.

我想我理解为什么会破坏钩子的主要规则之一。

通过查看Redux文档上的the example，他们似乎使用了selectors.js文件来收集当前状态，但是我认为不再需要引用mapStateToProps。

我是否需要创建某种“ getter”函数，该函数应在useEffect挂钩中调用？

Answer 1

别忘了将user作为对useEffect的依赖，否则您的效果将不会获得更新的值。

const user = useSelector(state => state.user);
useEffect(() => { 
   // do stuff     
}, [user]);

Answer 2

我发现使用两个 useEffects 对我有用，并且使用 useState 来更新用户（或在本例中为 currUser）。

const user = useSelector(state=>state.user);
const [currUser, setCurrUser] = useState(user);

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

useEffect(()=>{
  setCurrUser(user);
}, [user]);

您必须使用 currUser 来显示和操作该对象。

Answer 3

您可以将useSelector与其他挂钩一起放在组件的顶部：

const MyComponent = () => {
  ...
  const user = useSelector(state => state.user);
  ...
}

然后，您可以在user个内部访问useEffect。

Answer 4

const tournamentinfofromstore=useSelector(state=>state.tournamentinfo)
useEffect(() => {
console.log(tournamentinfofromstore)
}, [tournamentinfofromstore])

所以问题在于，如果您更改useEffect内部的状态以导致重新渲染，然后再次使用，则如果该组件将数据传递到另一个组件，则useEffect会被称为“ &&”，这将导致无限循环。将数据存储在子组件的状态中将导致重新渲染，并且结果将是无限循环。！

Answer 5

要在@Momotomoto的回复之上添加。有时，您需要在useEffect之前依赖商店进行加载。在这种情况下，如果状态未定义，您可以简单地返回。商店加载后，useEffect将重新呈现

const user = useSelector(state => state.user);

useEffect(() => {
  if(user === undefined){
    return}else{ 
    // do stuff
}}, [user]);

React在useEffect中从Redux存储获取状态

5 个答案: