Question

提取被触发两次

2021-05-12

274

javascript reactjs

我有一个函数，在调用时会向服务器发送两个请求，但只需要一个。

function Welcome() {
    var styles = {
        backgroundColor: "#eee"
    };
    
    const [isLoaded, setIsLoaded] = useState(false);
    const [cats, setCats] = useState([]);

    if(!isLoaded) {
        setIsLoaded(true);
        fetch('http://localhost:3001/api/categoryList')
            .then((response) => response.json())
            .then((response) => {
                setCats(response);
        });
    }
    return (
    <div style={{textAlgin:"center"}} className="Welcome">
        <title>{gloArray.titleProject}</title>
        <div id="546" className="prevTypePlace" >
            {
                cats.map((value) => <Typepreview image={value.workImage} id={value.workId} key={value.workId} name={value.workName} />)
            }
        </div>
    </div>
    );
}

我怀疑组件被绘制了两次，但我不知道如何修复它

Answer 1

useEffect 用于需要一些副作用的时候，因此请将以下条件放在其中：

useEffect(() => {

if(!isLoaded) {
        setIsLoaded(true);
        fetch('http://localhost:3001/api/categoryList')
            .then((response) => response.json())
            .then((response) => {
                setCats(response);
        });
    }
}, [isLoaded])

currenty，这个 if 条件在每次渲染时都会被调用，但我们不希望这样，我们希望只有当 isLoaded 发生变化时才调用它