如何根据外部条件（例如购买的商品数量）切换两个不同的按钮（function/text）

Question

我正在重新审视之前的想法，即在 CRA 中有条件地在两个按钮之间切换。

import ...
const ...

export const Index = () => {

  // Boolean to toggle buttons conditionally
  const [reachMax] = React.useState( id <= 8 );

  return (

  <div>{(reachMax &&
    <div{(reachMax &&
      <button 
        id="btn1"
        type="button"
        className="..." 
        onClick={event}
      >
        Event A: "Sales!"
      </button>
    </div>)
  ||
    <div>
      <button
        id="btn2"
        type="button"
        className=" "
        disabled='true'
      >
        Event B: "Out of Stock"
      </button>
    </div>)
    }
  )
}

使用状态挂钩。布尔值 ( contract.tokenUri.id <= 8 ) 的条件动态地取自外部智能合约。如何设置条件才不会 return 未定义的错误？

Answer 1

您正试图在箭头函数中访问 this。除了不知道 this 将指向什么之外，在 React 中，这不是您访问功能组件中的道具的方式。

我假设您在 Toggle 组件中像这样使用 Index：

<Index data={...} />

然后您可以像这样访问它：

export const Index = (props) => {
    const data = props.data;
    // ....
};

Answer 2

通过设置此条件来解决问题，以便从智能合约中读取 ID：

const reachMax = mintedState.state === "成功" && mintedState.data.length <= 8;

不需要构造函数，因为状态直接从外部合约传递到应用程序中。一旦满足nmintedState.state条件（成功），data.length（ID的代理）就可以作为设置右键的最终条件

此问题特定于所使用的 Solidity 合约和 ReactJS 的组合。

如何根据外部条件（例如购买的商品数量）切换两个不同的按钮（function/text）

How to toggle two different buttons (function/text) based on external condition (e.g. num of items purchase)

javascript

button

conditional-statements

reactjs

create-react-app