React Typescript-Math.randomは、最小値と最大値が設定されていても間違った結果を返します

問題はこれに減らすことができます：

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();

ローカルストレージの値は常に文字列です。この：

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

になり、8と9で：

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

0.234458またはのようなものに変わります1.63138-+末尾の8を小数部分に連結Math.floorし、それを削り取ります。そのため、0または1のいずれかの数値が残ります。

おそらく次のマッパー関数を使用して、ストレージ値を最初に数値にキャストします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);

この問題は、（回避より多くの活字体を利用することによって回避し、適切にあなたの変数を入力されている可能性がany-活字のポイントを敗北） -の種類minNumberとmaxNumberされ、文字列や数値だけではなく数はあなたを傾けていました。

ジェネリックも使用します。

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);
  // ...