reactjs - React js 简单钩子效果

Question

具有以下代码：

import React, { useState, useEffect } from 'react';

function UseEffectComp1() {
    const [count, setCount] = useState(0);
    const [mounted, setMounted] = useState(false);

    useEffect(() => {    
        if (mounted)
            setMounted(false);
        else
            setMounted(true);
    });

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => {
                    mounted ? console.log("mounted") : console.log("not mounted");
                }
                }>
                Click me
            </button>
        </div>
    );
}

export {UseEffectComp1}

我遇到了无限循环问题。它有什么问题以及如何使其工作？

标签： reactjs

Answer 1

useEffect(() => {    
  if (mounted)
    setMounted(false);
  else
    setMounted(true);
},[]);

原因是因为每次你打电话的时候setMounted useEffect都会被叫到。所以在和mounted之间变化的值。因此你得到了无限循环问题truefalse