javascript - Hvilken verdi bruker du for å initialisere en tilstandsvariabel av typen number i React?

La oss si at jeg har en tilstandsvariabel kalt amount og jeg har et inntastingsfelt som endrer variabelen når vi skriver i det. Jeg vil ikke vise startverdien som 0. Med hva bør jeg da initialisere tilstandsvariabelen? Jeg prøvde å initialisere med null, men konsollen ga en advarsel:

Warning: 'value' prop on 'input' should not be null.
Consider using the empty string to clear the component or 'undefined' for uncontrolled components.

Jeg har to spørsmål nå:-

  1. Hvorfor gir inndatafeltet en advarsel når det mottar en verdi som null? Jeg prøvde å google, men klarte ikke å få et klart svar.
  2. Med hva bør jeg initialisere tilstandsvariabler av typen tall?

Svar #1

La meg svare på begge spørsmålene dine ett etter ett:

1. Hvorfor gir inndatfeltet en advarsel når det mottar verdien null?

Denne advarselen vises fordi React forventer at value-egenskapen til en kontrollert input-komponent skal være en string, number (eller undefined hvis input-typen er ukontrollert1). Når verdien settes til null, anser React det som en feil verditype, så den kaster en advarsel for å minne deg om å bruke en passende verditype.

Viktig punkt å merke seg fra de offisielle dokumentene:2

Verdien du gir til kontrollerte komponenter bør ikke være undefined eller null.

2. Med hva bør jeg initialisere tilstandvariabler av talltype?

Hvis du ikke vil vise en startverdi på 0, kan du initialisere tilstandsvariabelen med en tom streng (''). På denne måten vil inndatafeltet fremstå tomt i starten, og React vil ikke gi en advarsel som du får. Dette fremgår også av den offisielle dokumentasjonen2 som sier:

Hvis du trenger at startverdien skal være tom (for eksempel med feltet firstName nedenfor), initialiser tilstandsvariabelen din til en tom streng ('').

const [amount, setAmount] = useState('');

  const handleChange = (e) => {
    // do whatever you want with amount by parsing it to number
    setAmount(e.target.value);
  };
...
<input type="number" value={amount} onChange={handleChange} />

Demo her

Referanser og videre lesning:

  1. Kontrollerte og ukontrollerte komponenter i React

  2. Kontrollerer en input med en tilstandsvariabel

  3. Konvertere en streng til et tall i Javascript

Relaterte artikler