Główny plik TSX Const [Minnumber, SetMinNumber] = Uselocalstorage ("Minrange", 1); const [maxNumber, setmaxNumber] = uselocalstorage ("maxrange", 10); ... Const GetRandomNumber = () => {// ...

3
CookieMonster 15 marzec 2021, 03:19

1 odpowiedź

Najlepsza odpowiedź

Problem można do tego zmniejszyć:

const minNumber = '8';
const maxNumber = '9';
const getRandomNumber = () => {
  console.log("min: " + minNumber + " max: " + maxNumber);
  console.log('part', maxNumber - minNumber + 1);
  const result = Math.random() * 2 + '8';
  console.log(result);
};

getRandomNumber();

Lokalne wartości pamięci masowej są zawsze ciągi . To:

let randomNr = Math.floor(
  Math.random() * (maxNumber - minNumber + 1) + minNumber
);

Zamienia się w 8 i 9:

let randomNr = Math.floor(
  Math.random() * 2 + '8'
);

Obracając się w coś podobnego do 1.63138 lub 1.63138 - + - + Concatenates końcówki 8 na części dziesiętne , a następnie Math.floor gofuje, Więc nadal pozostawasz z liczbą, która jest 0 lub 1.

Porzucić wartości pamięci na pierwsze, być może mając funkcję Mapper dla useLocalStorage:

export function useLocalStorage(key, defaultValue, mapper = str => str) {
    const getInitialValue = () => localStorage.getItem(key) !== null
      ? mapper(localStorage.getItem(key))
      : defaultValue;
    const [value, setValue] = useState(getInitialValue);
    const setAndStoreValue = (newValue) => {
        if (newValue !== '') {
            setValue(newValue);
            localStorage.setItem(key, newValue)
        }
    }
    return [value, setAndStoreValue];
};
const [minNumber, setMinNumber] = useLocalStorage('minRange', 1, Number);
const [maxNumber, setMaxNumber] = useLocalStorage('maxRange', 10, Number);

Ten problem mógłby zostać uniknięty, wykorzystując maszynopis i wpisz właściwe zmienne (unikaj any - który pokonuje punkt maszynopisu) - typ minNumber i maxNumber jest > Ciąg lub numer zamiast liczby wyrwałby cię.

Używaj także generycznych:

function useLocalStorage<T>(
  key: string,
  defaultValue: T,
  mapperToValue: (lsValue: string) => T,
  mapperToLS: (value: T) => string
) {
  const getInitialValue = () => {
    const lsValue = localStorage.getItem(key);
    return lsValue !== null ? mapperToValue(lsValue) : defaultValue;
  };
  const [value, setValue] = useState(getInitialValue);
  const setAndStoreValue = (newValue: T) => {
    setValue(newValue);
    localStorage.setItem(key, mapperToLS(newValue));
  };
  return [value, setAndStoreValue] as const;
}

export default function App() {
  const [minNumber, setMinNumber] = useLocalStorage("minRange", 1, Number, String);
  const [maxNumber, setMaxNumber] = useLocalStorage("maxRange", 10, Number, String);
  const [rndNumber, setRndNumber] = useState(0);
  // ...
2
CertainPerformance 15 marzec 2021, 00:51