reactjs - 基于 API 返回的 React 切换按钮

Question

我目前正在开发一个 React 应用程序。

正如您在以下代码中看到的，有两个按钮。如果用户尚未创建请求（默认），我想显示灰色按钮。如果用户创建了请求，则该按钮应为绿色。

问题： 主要问题是，映射函数 (API) 没有为“无请求”返回任何值，因此我无法识别“无请求”。这意味着 .isEmpty,.length, .indexOf,... 以及“if-else”都不起作用，因为没有什么可以验证的。

      const greenButton = (
    <Button color="green" onClick={e => DeleteRequest(e, rest.id)}>Request</Button>
  );

  const greyButton = (
    <Button color="grey" onClick={e => CreateRequest(e, props.reservationID)}>Request</Button>
  );

  return (
    <div>
      {greyButton}

      {requests.map((rest, i) => (
        <div key={i}>
          {rest.requester === username
            ? <div>{greenButton}{rest.requester} <i
              aria-hidden="true"
              className="delete icon"
              onClick={e => DeleteRequest(e, rest.id)} />
            </div> : <div />}
        </div>
      ))}
    </div>
  );

用户界面中的结果：

接口：

有任何想法吗？（如果您需要更多信息，我很乐意提供更多详细信息）

标签： reactjs

Answer 1

条件渲染

使用三元requests作为已定义/真实对象并具有真实长度属性。在真分支映射请求，假分支中的灰色按钮。这包括requests最初（或从 API 返回）undefined或空数组[]。

return (
  <div>
    {requests && requests.length ? requests.map((rest, i) => (
      <div key={i}>
        {rest.requester === username
          ? <div>{greenButton}{rest.requester} <i
            aria-hidden="true"
            className="delete icon"
            onClick={e => DeleteRequest(e, rest.id)} />
          </div> : <div />}
      </div>
    )) : (
      {greyButton}
    )}
  </div>
);