RangeSlider ReactJS после отправки данных всегда извлекает значение инициализации

Question

У меня ошибка, которая должна быть моей ошибкой. У меня есть компонент, отвечающий за управление яркостью лампочки.

import React, { useState } from 'react';
import RangeSlider from 'react-bootstrap-range-slider';

const Brightness = (props) => {
    const [brightness, setBrightness] = useState(127);

    async function postBrightness (e)  {
      setBrightness(e.target.value);
      try {
              let result =  await fetch(`..../${props.id}/set`, {
                method: "POST",
                //mode: 'no-cors',
                headers: {
                  Accept: "application/json",
                  "Content-Type": "application/json"
                },
                body: JSON.stringify({
                  brightness: e.target.value
                })
              });
              console.log(result);
            } catch (e) {
              console.log(e);
            }
    }

    return (
      <div>
        Brightness:
        <RangeSlider
          value={brightness}
          step={63.5}
          min={0}
          max={254}
          onChange={async (e)=> {await postBrightness(e)}}
        />
      </div>
    );
};

export default Brightness;

Как только я перемещаю ползунок диапазона, он отправляет правильное значение, но как только я прекращаю перемещать ползунок диапазона, он возвращается к начальное значение (127).

import React, { Component } from 'react';
import { Ring } from 'react-awesome-spinners'

import State from './State.js';
import Brightness from './Brightness';
// import ColorTemperature from './ColorTemperature';

export default class Measurement extends Component {
    constructor(props){
        super(props);
        this.state = {
            data: []
        }
    }

    data_update(){
        fetch('http://...../'+ this.props.id + '/recent_data')
            .then(response => response.json())
            .then(data => this.setState({ data: data.data }));
    }

    componentDidMount(){
        setInterval(() => this.data_update(), 2000);
    }

    
    render() {
        const { data } = this.state;

        if( !data.length ){
            return(<Ring />)
        }
        else {
            return (
                <ul>
                    {data.map(i=> (
                    <li className="measurements" key={i._id}>
                        {i.state ? (<State id={this.props.id}/>) : false}
                        {i.battery ? (<p>Battery: {i.battery}%</p>): false}
                        {i.voltage ? (<p>Voltage: {i.voltage}mV</p>) : false}
                        {i.temperature ? (<p>Temperature: {i.temperature}ºC</p>) : false}
                        {i.humidity ? (<p>Humidity: {i.humidity}%</p>) : false}
                        {i.pressure ? (<p>Pressure: {i.pressure}mBar</p>) : false}
                        {i.current>-1  ? (<p>Current: {i.current}A</p>) : false}
                        {i.consumption ? (<p>Consumption: {i.consumption}W</p>) : false}
                        {i.brightness>-1 ? (<Brightness id={this.props.id}/>) : false}
                        {/* {i.color_temp  ? (<ColorTemperature id={this.props.id}/>) : false} */}
                        {i.date ? (<p>Date: {i.date}</p>) : false}
                    </li>
                    
                    )
                 )}
                </ul>
                
        )
        }
    }
}

Если бы кто-нибудь мог мне помочь, я был бы чрезвычайно признателен. Спасибо.

Answer 1

Я только что протестировал код вашего слайдера, и он у меня отлично сработал.

Однако есть одна причина, по которой состояние может сбрасываться: компонент отключен, а затем снова смонтирован. Вы можете проверить это, добавив

useEffect(() => {
    console.log("mounted");
    return () => console.log("unmounted");
}, []);

к вашему компоненту «Яркость». Если вы видите, что компонент отключен и снова смонтирован, значит, что-то не так с родительским компонентом. Я не заметил здесь ничего явно неправильного, но вы обновляете данные каждые две секунды, а затем сопоставляете данные:

{data.map(i=> (
    <li className="measurements" key={i._id}>

Ключ правильный? Каждый раз одно и то же для одних и тех же элементов? В противном случае это может быть причиной нежелательного поведения при установке.