javascript - Redux - Hooks : Using React Hooks with 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]);

您正在另一个钩子(Hook)中使用一个钩子(Hook)。这是不允许的。只能在功能组件内部和任何方法外部放置钩子(Hook)。有关更多信息 https://reactjs.org/docs/hooks-rules.html