日付111-6

6430 ワード
第一項目 プロジェクト プログラミング テキストリンク

昨日作ったキー素子が変わりました。


DBからファイルを受信する場合、昨日INTEGERでmap関数を記述しましたが、DBからファイルを受信するフォーマットが変わりました.
DBは、以下に示すように、Array形式でデータを受信する.
const arr = [
  { buttonId: 0, isFinished: true },
  { buttonId: 1, isFinished: false },
  { buttonId: 2, isFinished: true },
  { buttonId: 3, isFinished: false },
  { buttonId: 4, isFinished: false },
  { buttonId: 5, isFinished: true },
];
buttonデータには,各idと完了,すなわち押下の有無を判断するオブジェクトの配列が含まれている.
まずstateを設定します.
const [buttonList, setButtonList] = useState(arr);
state名をより直感的にするには、次のように変更します.
stateレンダリングボタンに従って、次の内容を作成します.
まず、Challengebuttonを天命素子で作成し、次のようにレンダリングします.
<ChallengeButton
  key={button.buttonId}
  onClick={buttonClick(button.buttonId)}
  isClick={button.isFinished}
  >
    {button.buttonId + 1} 일차
</ChallengeButton>
次にbuttonClick関数は次のように定義されます.
const buttonClick = key => () => {
    setButtonList(prevState => {
      return prevState.map(button => {
        if (button.buttonId === key) {
          return { buttonId: key, isFinished: !button.isFinished };
        }
        return button;
      });
    });
  };
ここでsetButtonListが関数を受信する理由は、setStateが関数を受信すると、次のstateを作成する値を返すことでstateを変更できるからである.
[JAVA]クラス/オブジェクト
[スプリングコア原理]-4