Redux - Hooks:结合使用React Hooks和Redux Hooks，要么创建无限循环，要么什么都不创建

Question

我知道这个问题已经被回答了很多次了。我只是找不到解决我的问题的答案，这让我相信，我要么很愚蠢，要么我的问题没有得到解决，因为它比我更愚蠢。除此之外，这就是我的问题：

我正在尝试创建一个功能组件，它从redux状态获取一些信息，以便将正确的语言标签呈现到登录表单中。

让我们从代码开始：

import React, { useState, useEffect } from "react";
import { Paper, TextField } from "@material-ui/core";
import { changeLanguage } from "../redux/actions";
import { useDispatch, useSelector } from "react-redux";



const Login = () => {
    const dispatch = useDispatch();
    const [language, setLanguage] = useState("de");
    const [strings, setStrings] = useState({});

    useEffect(() => {
        console.log("I have been called", language, strings);
        setLanguage(["de", "en"].includes(navigator.language.split("-")[0]) ? navigator.language.split("-")[0] : "de");
    }, [language]);

    dispatch(changeLanguage(language));
    const str = useSelector(state => state.base.strings.login);
    console.log(str);
    setStrings(str); // <- THIS ONE IS CAUSING THE ERROR
    return (
        <div className={"App"}>
            <Paper>
                <TextField label={strings.username}/><br/>
                <TextField label={strings.password} type={"password"}/>
            </Paper>
        </div>
    );
};

export default Login;

这就是我用来让应用程序正常工作的东西。我意识到在每次渲染时设置字符串都会导致无限循环。这一点很明显。但是，在使用此代码时：

import React, { useState, useEffect } from "react";
import { Paper, TextField } from "@material-ui/core";
import { changeLanguage } from "../redux/actions";
import { useDispatch, useSelector } from "react-redux";



const Login = () => {
    const dispatch = useDispatch();
    const [language, setLanguage] = useState("de");
    const [strings, setStrings] = useState({});

    useEffect(() => {
        console.log("I have been called", language, strings);
        setLanguage(["de", "en"].includes(navigator.language.split("-")[0]) ? navigator.language.split("-")[0] : "de");
        dispatch(changeLanguage(language));
        const str = useSelector(state => state.base.strings.login);
        console.log(str);
        setStrings(str);
    }, [language]);

    return (
        <div className={"App"}>
            <Paper>
                <TextField label={strings.username}/><br/>
                <TextField label={strings.password} type={"password"}/>
            </Paper>
        </div>
    );
};

export default Login;

我得到了这个错误：

/src/App/pages/login.js
  Line 17:15:  React Hook "useSelector" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

是的，我确实理解它在告诉我什么，但我确实相信useEffect是一个React Hook，或者我在这里漏掉了什么？

我只是在寻找一种让它工作的方法。它不会那么难，因为我可以让它与类组件一起工作，没有问题。

如果这个问题很愚蠢，请详细说明原因，而不是简单地否决它。这将对开发和理解这个问题有很大的帮助。我查阅了两个小时的文档，尝试了一大堆东西。没有一样东西起作用。

感谢您抽出宝贵的时间！

Answer 1

 useEffect(() => {
        console.log("I have been called", language, strings);
        setLanguage(["de", "en"].includes(navigator.language.split("-")[0]) ? navigator.language.split("-")[0] : "de");
        dispatch(changeLanguage(language));
        const str = useSelector(state => state.base.strings.login);
        console.log(str);
        setStrings(str);
    }, [language]);

你正在使用一个钩子在another.That里面不是allowed.Only的地方你可以把钩子放在功能组件里面和任何method.For更多信息https://reactjs.org/docs/hooks-rules.html之外