时间戳

首页 > 解决方案 > 发布数据后 RangeSlider ReactJS 始终检索初始化值

javascript - 发布数据后 RangeSlider ReactJS 始终检索初始化值

问题描述

我有一个应该是我的错的错误。我有一个组件负责控制灯泡的亮度。

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>
                
        )
        }
    }
}

如果有人可以帮助我，我将非常感激。谢谢你。

标签： javascriptreactjsreact-hooksfetch

解决方案

我刚刚测试了您的滑块的代码，它对我来说效果很好。

但是，状态可能重置的原因之一是：组件已卸载，然后再次安装。您可以通过添加来测试它

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

到您的亮度组件。如果您看到组件被卸载并再次安装，则说明父组件有问题。我没有看到任何明显的错误，但是您每两秒更新一次数据，然后映射数据：

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

密钥是否正确？对于相同的元素，每次都是一样的吗？如果不是，这将是不需要的安装行为的原因。

推荐阅读