useState hook 在 react-native 中使用时会导致 "too many rerenders" 错误

Question

我刚开始使用 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>
    )
};

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

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>
    )
};

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

Answer 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”，然后您可以在事件处理程序中使用

useState hook 在 react-native 中使用时会导致 "too many rerenders" 错误

useState hook causes "too many rerenders" error when using it in react-native

reactjs

react-native

react-hooks

use-state