useCallback 不改变变量值

Question

I am using ReactJS along side Foxglove Studio to create a custom panel with a slider on it. I have created the slider, but when I attach a callback to the onChange element of the slider the slider remains static and doesn't allow me to move it

let LEDValue: number | number[] = 0;

const sliderOnChange = useCallback(
  (_event: Event, value: number | number[]) => {
    if (value !== LEDValue) {
      value = LEDValue;
    }
  },
  [LEDValue],
);

const min = 0;
const max = 254;
const step = 1;
const marks = [
  { value: min, label: String(min) },
  { value: max, label: String(max) },
];

return (
  <div style={{ padding: "1rem" }}>
    <h2>{LEDValue}</h2>
    <Slider
      min={min}
      max={max}
      step={step}
      marks={marks}
      value={typeof LEDValue === "number" ? LEDValue : 0}
      onChange={sliderOnChange}
    />
  </div>
);

No errors when I build it, I just can't drag the slider and values don't update. Am I missing something?

Answer 1

u need useState to store Led value also the logic on function sliderOnChange seem not right...

Maybe u can do like this

const sliderOnChange = useCallback(
  (_event: Event, value: number | number[]) => {
    LEDValue = value
// If using useState
setLedValue(value)
  },
  [LEDValue],
);