条件渲染显示两个组件答案

【问题标题】：Conditional rendering shows both components条件渲染显示两个组件
【发布时间】：2020-02-01 20:59:42
【问题描述】：

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

异步获取数据：

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

我在条件渲染方面做错了吗？还是与获取异步有关？

【问题讨论】：

组件错误是什么意思？异步函数中的设置状态也不是批处理的，因此每个 setState 都会触发重新渲染，但是由于您的 setLoading(false) 是最后一个，我会说您之前不会看到结果（如果我看到它正确加载和错误都渲染 Component2）
我遇到了同样的问题，我通过使用 CSS 显示块和无解决它，使用 CSS 显示属性根据状态显示和隐藏组件

标签： javascript reactjs

【解决方案1】：

test 状态的初始状态是虚假的。这一点，加上运算符优先级可能导致错误的错误。见http://www-lia.deis.unibo.it/materiale/JS/developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence.html。

可能你想要的是：

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

【讨论】：

【解决方案2】：

在第一行你使用 useState 钩子没有初始状态，所以你的状态变成 undefined （记住 undefined 是假值）。

const [test, setTest] = useState();

您应该为 test 设置初始状态，或者更改渲染组件的条件。

【讨论】：