useState 钩子在 react-native 中使用时会导致“重新渲染过多”错误答案

【问题标题】：useState hook causes "too many rerenders" error when using it in react-nativeuseState 钩子在 react-native 中使用时会导致“重新渲染过多”错误
【发布时间】：2021-06-19 21:52:41
【问题描述】：

我刚开始使用 React-native，但我不明白为什么会出现“重新渲染过多”错误。所以我使用 npx react-native init 命令创建了应用程序，然后我更改了 App.js，现在我的 App.js 看起来像这样：

const App = () => {
    const [numberOne, setNumberOne] = useState(0);
    const [numberTwo, setNumberTwo] = useState(0);

    setNumberOne(5);
    setNumberTwo(7);

    return (
        <View>
            <Text>Number one is {numberOne}</Text>
            <Text>Number two is {numberTwo}</Text>
        </View>
    )
};

我也尝试在函数中使用 seters 但得到了同样的错误：

const App = () => {
    const [numberOne, setNumberOne] = useState(0);
    const [numberTwo, setNumberTwo] = useState(0);

    const set = () => {
        setNumberOne(5);
        setNumberTwo(7);
    };

    set();

    return (
        <View>
            <Text>Number one is {numberOne}</Text>
            <Text>Number two is {numberTwo}</Text>
        </View>
    )
};

为什么会发生这种情况以及如何解决？

【问题讨论】：

标签： reactjs react-native react-hooks use-state

【解决方案1】：

您正在更改组件呈现时的状态。此外，当组件的状态发生变化时，它会再次渲染。因此，您将获得无限循环的渲染。

渲染 => 更新渲染状态 => 再次渲染，因为状态改变 => 再次更新状态，因为它再次渲染 => ...

你可以尝试的是这样的：


const App = () => {
    const [numberOne, setNumberOne] = useState(0);
    const [numberTwo, setNumberTwo] = useState(0);

    useEffect(() => {
        setNumberOne(5);
        setNumberTwo(7);
    }, []);

    return (
        <View>
            <Text>Number one is {numberOne}</Text>
            <Text>Number two is {numberTwo}</Text>
        </View>
    )
};

这将安排一个效果仅在第一次渲染后运行，因为您将一个空的依赖项数组作为useEffect 钩子的第二个参数传递。

您不必定义 setter，您的 setNumberOne 和 setNumberTwo 已经是“setter”，然后您可以在事件处理程序中使用它们

【讨论】：