如何根據外部條件（例如購買的物品數量）切換兩個不同的按鈕（功能/文本）

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 ）的條件是從外部智能合約動態獲取的。 如何設置條件使其不會返回未定義的錯誤？

Answer 1

您正試圖在箭頭函數中訪問this 。 除了不知道this將指向什么之外，在 React 中這不是您訪問功能組件中的 props 的方式。

我假設您在Toggle組件中使用這樣的Index ：

<Index data={...} />

然后您可以像這樣訪問它：

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

Answer 2

通過設置此條件以從智能合約中讀取 ID 設法解決：

constreachMax = mintedState.state === "SUCCESS" && mintedState.data.length <= 8;

不需要構造函數，因為狀態是從外部合約直接傳遞到應用程序中的。 一旦 nmintedState.state 條件滿足（成功），data.length（ID 的代理）就可以作為設置右鍵的最終條件。

這個問題是Solidity Contract 和ReactJS 結合使用的特有問題。