Javascript 条件渲染显示这两个组件

我有两个基于状态条件渲染的组件，但我遇到了一个问题，即在显示正确组件之前的一瞬间显示错误组件

异步获取数据：

  const [test, setTest] = useState();
  const [loading, setLoading] = useState();
  const [error, setError] = useState(); 

  const fetchData = async () => {
    console.log("running");
    setLoading(true);
    setError(false);
    try {
      const result = await axios(
        "https://jsonplaceholder.typicode.com/posts/props.selectedId" // Is dynamic and changes on user click
      );
      setTest(result.data);
    } catch (error) {
      if (error.response.status == 404) {
        setError(error);
        setTest(null);
      }
    }
    setLoading(false);
  };

渲染：

  return (
    <div className={classes.root}>
      {!loading && !error && test? (
        <div>
          <Card className={classes.card}>
            <CardContent>
              <Title>Adattributes</Title>
              <Typography variant="h6" component="h1">
                name
              </Typography>
              <Grid container spacing={3}>
                <Grid item xs={3}>
                  <Typography variant="subtitle2" component="h1">
                    address
                  </Typography>
                  {test.title}
                </Grid>
              </Grid>
            </CardContent>
            <CardActions>
              <Component1
                value={test}
                setTest={setTest}
              />
            </CardActions>
          </Card>
        </div>
      ) : (
        <Component2 setTest={setTest} />
      )}
    </div>
  );
});

返回(
{！加载&&！错误&&测试(
属性
名称
地址
{test.title}
) : (
)}
);
});

---

条件渲染是否有问题？或者它与异步获取有关吗？

测试的初始状态为falsy。这加上运算符优先级可能导致错误错误。看

可能您希望这样做的是：

(!loading && !error && test) ? ... : ...

在第一行中，您使用useState钩子而不使用初始状态，因此您的状态变为未定义状态（请记住，未定义的是falsy值）

---

您应该为测试设置初始状态，或者更改呈现组件的条件。

您所说的错误组件是什么意思？另外，异步函数中的set state不是批处理的，因此每个setState都会触发重新渲染器，但由于您的setLoading（false）是最后一个，因此我想说，您以前不会看到结果（如果我看到它正确加载并出错两个渲染组件2），我遇到了相同的问题，我使用CSS显示块和none解决了它，使用CSS显示属性根据状态显示和隐藏组件

const [test, setTest] = useState();