Nextjs 条件渲染数据答案

【问题标题】：Nextjs conditional rendering of dataNextjs 条件渲染数据
【发布时间】：2021-03-01 06:29:24
【问题描述】：

我正在尝试从 API 呈现数据，如果加载，我将数据作为 JSON，如果获取成功，我会推送一个元素

{status: 'success'}

如果获取不是我推送这个

{status : 'failed}

当我尝试像这样在我的主函数上渲染它时

if(data.status === 'success'){
return <div> data </div>
} else if(data.status === 'failed'){
return <div> not data </div>
}

它给了我一个错误，我没有什么可返回的。

【问题讨论】：

如果所有条件都失败，你必须返回一些东西。您可以在最后一个 if else 之后添加一个默认 else 块。添加这个 else{ return
默认响应
}

标签： javascript reactjs next.js

【解决方案1】：

在 React 组件中，您需要返回有效的 React 元素或 null。当data.status 不是'success' 或'failed' 时，您没有处理该条件，在这种情况下您不会返回任何内容。您可以通过在最后返回null 来完成这两个条件都不满足的事件：

if(data.status === 'success'){
  return <div> data </div>
} else if(data.status === 'failed'){
  return <div> not data </div>
}
return null;

【讨论】：

【解决方案2】：

当你发送一个 http 请求时，可能需要几秒钟来捕捉响应但是组件渲染会立即发生

检查一下：

const ComponentName = () =>{
  return(
      <div>
          {data.status === 'success' && "data"}
          {data.status === 'failed' && "not data"}
      </div>
  );
};

如果status 的模式不超过两种，你可以这样写：

const ComponentName = () =>{
  return(
      <div>
          {data.status === 'success' ? "data" : "not data"}
      </div>
  );
};

【讨论】：