Obecnie próbuję zbudować funkcję, która wykonuje następujące czynności: Pierwsze kliknięcie: 1, 2, 3, 4, 5, 6, 7 Drugie kliknięcie: 8 Trzecie kliknięcie: 9   importuj { FC, useState } z 'react'; eksport const ...

1
ncxcnb 25 czerwiec 2021, 13:37

5 odpowiedzi

Najlepsza odpowiedź

Musisz zapisać ostatnią liczbę i, aby pętla nie zaczynała się za każdym razem od 0.

Jeśli chcesz wyprowadzić pierwsze 7 liczb w linii, musisz zadzwonić console.log () po pętli for. Ale możesz podać ciąg w pętli, aby uzyskać ostateczny wynik. (możesz użyć prostego operatora potrójnego, aby dodać przecinek tylko wtedy, gdy nie jest to pierwsza pętla)

Przykład pracy: (uproszczony do demonstracji)

let counter = 0;
let last_count = 0;
let maxLength = 7;

function firstHandOut() {
  let output = '';
  
  for (let i = last_count + 1; i < 10; i++) {
    output += (i != last_count + 1 ? ', ' : '') + i;
    if ((i === (maxLength + counter))) {
      last_count = i;
      break;
    }
  }
  
  console.log(output);
  counter++;
}
<button type="button" onclick="firstHandOut();">test</button>
3
biberman 25 czerwiec 2021, 14:08

Za każdym razem zaczynasz wartość i od 0. Zamiast tego powinieneś zacząć od count. Spróbuj tego.

for (let i = count; i < 10; i++) {
  console.log(i);
  if ((i === (maxLength + counter))) {
    break;
  }
}
2
biberman 25 czerwiec 2021, 10:56

Możesz zachować małą tablicę swoich maksymalnych wartości. To zaoszczędzi ci na warunkowym. Zachowaj również stan dla wartości minimalnej.

const {useState} = React;

function Example() {

  const [count, setCounter] = useState(0);
  const [min, setMin] = useState(1);

  const max = [7, 8, 9];

  function firstHandOut() {
    const arr = [];

    // Check the min state and the value in
    // the dictionary for this count
    for (let i = min; i <= max[count]; i++) {
      arr.push(i);
    }

    console.log(arr.join(''));

    // Update the min state
    setMin(max[count] + 1);
  }

  function counter() {
    setCounter(count + 1);
    firstHandOut(count);
  };

  return (
    <button onClick={counter}>HandOut</button>
  );
};

// Render it
ReactDOM.render(
  <Example />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
1
Andy 25 czerwiec 2021, 11:11

Możesz utworzyć funkcję z licznikiem kliknięć jako argumentem. Zobacz następujący pseudokod:

function name(var clickCount) {
  let startVal = 0;

  switch (clickCount) {
    case 1:
      startVal = 0;
      break;
    case 2:
      startVal = 8;
      break;
    case 3:
      startVal = 9;
      break;
  }

  for (let i = startVal; i < 10; i++) {
    console.log(i);
    if ((i === (maxLength + counter))) {
      break;
    }
  }
}

W zależności od przypadku użycia lepszym rozwiązaniem może być słowo kluczowe yield.

0
biberman 25 czerwiec 2021, 10:57

Myślę, że szukasz czegoś takiego.

<button onclick="clicked()">CLICK ME</button>



<!-- JAVASCRIPT CODE -->
<script>

i=1;
counter = 0;
maxLength = 7;

if(counter>0){
counter = maxLength+1;
}

function clicked(){
 counter = 1;

if(counter >= maxLength){
    i = counter;
}

for (i; i < 10; i++) {
  if(i<maxLength){
  console.log(i);
  }
  else{
      console.log(i++);
      break;
  }

}
}

</script>
0
Derrick Zziwa 25 czerwiec 2021, 12:12