为什么console.log（“ hello）在React钩子中打印六次

Question

我正在学习react挂钩，并且我使用了随机API来获取演示用户。谁能告诉我为什么你好会打印6次，而且我不能在return语句中使用if语句

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

function RandomUser () {
    const [users, setuser] = useState([]);
    const [loading, setLoading ] = useState(true);

    useEffect(()=>{
        console.log("fetching api ");
        fetch("https://randomuser.me/api/?results=50").then((res)=>{
            return res.json();
        }).then((res)=>{
            setuser(res.results);
            setLoading(false);
        })
    },[])
        console.log("hello");
    return (
        <>
        {loading && <h1>Loading</h1>}
        {users.map((v,i)=>{
            return(
                <li>
                    {v.name.first}
                </li>
            )
        })}
        </>
    );
}

export default RandomUser;

Answer 1

您的console.log行不在useEffect钩子内，因此每次渲染都被调用。无论何时需要，React调用都会渲染，因此您不应在功能组件内部包含具有副作用（钩子除外）的代码。 如果希望在返回结果后调用该日志行，则将其移至setLoading(false);

之后

JSX在JSX文字内部不支持if statements，但它确实支持三元表达式（condition ? trueValue : falseValue）和布尔表达式（condition && trueValue或condition || falseValue） ，通常可以正常工作。另外，您可以将if块放在小的子组件或帮助函数中。只要确保您始终从每个代码分支中返回一个组件或null即可。例如，制作一个加载组件：

function Loading ({loading=true}) {
  if (loading) return (<h1>Loading...</h1>)
  return null // notice the else is not necessary here
}

//and use it like this:

return(<><Loading loading={loading} /></>)

不支持if语句的原因是它们没有返回值（它们不是expressions），而三元和布尔表达式却没有。您可以从if语句内部调用return，但这会导致整个函数返回，而不仅仅是if语句。

JSX被遵从React.createComponent(React.Fragment, null, children)之类的东西。想象一下，如果将if放在children语句中会发生什么。实际上，尝试使用类似console.log(if (true) {true} else {false})的方法，然后看看会发生什么。之所以失败，是因为您必须提供一个表达式，而不是一个 statement 作为函数的参数。 （请注意，虽然通常表达式也是语句，但并非总是相反）。

您可能会发现此视频有帮助：https://en.hexlet.io/courses/intro_to_programming/lessons/expressions/theory_unit