Reactjs 当数据可能包含不同的内容时呈现已破坏的数据

假设我有以下代码

const [loaded,setLoaded]=useState(false);
const[data,SetData]=useState();
useEffect(() => {
    let GetData= async(){ await axios.get("").data;
    SetData(data);
    setLoaded(true);}

    GetData();

}, [])
return(<>
    <DefaultComponent></DefaultComponent>
    {loaded && data.status=="success"?
    <OtherComps name={data.user.name} reference={data.user.reference} username={data.user.creds.username} profilePic={data.user.profile.card.picture} ></OtherComps>
    :
    <ErrorComp></ErrorComp>
}
</>)

问题是我有3次了，它不可读。另外，在真实浏览器中，由于渲染方式不同，会产生一些闪烁效果。如果恰巧是一个包含大量数据和图像的更复杂组件，这将是一个更大的问题。

---

你们这些家伙是怎么解决的？我应该使用方法2是因为属性引用更具可读性，还是使用方法1是因为它更好地组合在一起？

我认为第一种方法比第二种方法更好，因为在第二种方法中，您的

DefaultComponent

将多次卸载和装载，但在第一种方法中，它只装载一次

我还建议您在第一种方法中更改代码结构，如下所示：-

  return (
    <>
      <DefaultComponent />
      {loaded ? (
        data.status === 'success' ? (
          <OtherComps
            name={data.user.name}
            reference={data.user.reference}
            username={data.user.creds.username}
            profilePic={data.user.profile.card.picture}
          />
        ) : (
          <ErrorComp />
        )
      ) : (
        <div>
          <div>loading</div>
        </div>
      )}
    </>
  );

返回(
{加载了吗(
data.status===“成功”(
) : (
)
) : (
加载
)}
);

  return (
    <>
      <DefaultComponent />
      {loaded ? (
        data.status === 'success' ? (
          <OtherComps
            name={data.user.name}
            reference={data.user.reference}
            username={data.user.creds.username}
            profilePic={data.user.profile.card.picture}
          />
        ) : (
          <ErrorComp />
        )
      ) : (
        <div>
          <div>loading</div>
        </div>
      )}
    </>
  );