Question

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

{status: 'success'}

如果不是我推送这个

{status : 'failed}

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

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

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

Answer 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;

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

Nextjs 条件渲染数据

2 个答案: