На состояние обработки реагируют родные - PullRequest
Новая
       68

На состояние обработки реагируют родные

0 голосов
/ 27 января 2020

Это мой сборщик с компонентом линейной диаграммы (LChart). 

<Picker selectedValue = {this.state.value}
          onValueChange = {this.onValueChange}
          >
          <Picker.Item value='' label='Select Device...' />
          {devices.map((s, i) => {
            return (<Picker.Item label={s} value={s} key={i}/>)
        })}
            </Picker>

        <LChart data={Fdata} title={"LineChart"}/>

У меня есть массив устройств для ввода в сборщик, и при каждом onValuechange я хочу показать линейную диаграмму соответствующего устройства. Моя функция onValueChange: 

onValueChange = async(value) => {
      this.setState({ value: value })
      this.interval = setInterval(() => {
      var Fdata = [];
      fetch('http://ec2-137.compute-1.amazonaws.com:3009/chart/unitID', {
        method: 'post',
        headers:{
          'Accept': 'application/json',
          'Content-type': 'application/json'
        },
        body:JSON.stringify({
          unitID: value,
        }) })
      .then((response) => response.json())
        .then((responseJson) => {
          responseJson.forEach(function (vol) {
            Fdata.push({
              value: vol.voltage,
              date: new Date(vol.time),
            });
          });
          if (this._isMounted) {
            this.setState({
                Fdata: Fdata,
            });
          }
        })
      }, 5000);
   }

Моя проблема заключается в том, что когда я первоначально выбираю устройство из средства выбора, линейный график отображается идеально и перезагружается в соответствии с моим заданным интервалом. Но когда я выбираю другое устройство из палитры, линейный график начинает переключаться между первым и вторым данными устройства, и то же самое продолжается с 3-м выбором и т. Д. Любая помощь будет оценена. Спасибо за тонну.

1 Ответ

0 голосов
/ 27 января 2020

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

const {useState, useEffect, Fragment} = React;

const Chart = ({deviceData}) => {
    return (
        <div>
            {deviceData ? (
                <Fragment>
                    <div>Date fetched: {Date.now()}</div>
                    <pre><code>{JSON.stringify(deviceData, null, 4)}
): (

Ожидание устройства

)} ); }; const App = () => {const [selectedDevice, setSelectedDevice] = useState (""); const [deviceAttrs, setDeviceAttrs] = useState (); useEffect (() => {if (! selectedDevice) return; const interval = setInterval (() => {fetch (`http://jsonplaceholder.typicode.com/todos/ $ {selectedDevice}`) .then (res => res. json ()) .then (data => setDeviceAttrs (data));}, 5000); return () => clearInterval (interval);}, [selectedDevice]); const options = [1, 2, 3]; возврат (
setSelectedDevice (e.target.value)}> Пожалуйста, выберите устройство {options.map (option => ( Устройство {опция} ))} {selectedDevice? ( ): (
Пожалуйста, выберите устройство
)}
); }; ReactDOM.render ( , document.getElementById ("app")); 
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="app"></div>
...