Reactjs 处理状态反应本机

这是我的选择器，带有折线图（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"}/>

我在这里的问题是，当我最初从picker中选择一个设备时，折线图会完美地显示出来，并根据我设置的时间间隔重新加载。 但是当我从选择器中选择一个不同的设备时，折线图开始在第一个和第二个设备数据之间切换，第三个选择继续，以此类推

我想我没有正确处理这个国家。

---

任何帮助都将不胜感激。非常感谢。

你需要清理一下间隙。现在，您只需不断创建额外的间隔，即可ping设备。您可以做的一件事是创建一个

useffect

，它将在所选设备更改后清除间隔。下面的示例使用了一个占位符，但您应该能够看到总体思路

const{useState，useffect，Fragment}=React；
常量图=（{deviceData}）=>{
返回(
{设备数据(
获取的日期：{Date.now（）}
) : (
等待设备

)}
);
};
常量应用=（）=>{
const[selectedDevice，setSelectedDevice]=useState（“”）；
const[deviceAttrs，setDeviceAttrs]=useState（）；
useffect（（）=>{
如果（！selectedDevice）返回；
常量间隔=设置间隔（（）=>{
取回(`http://jsonplaceholder.typicode.com/todos/${selectedDevice}`）
.then（res=>res.json（））
。然后（数据=>setDeviceAttrs（数据））；
}, 5000);
return（）=>clearInterval（interval）；
}，[selectedDevice]）；
常量选项=[1,2,3]；
返回(
setSelectedDevice（例如target.value）}>
请选择一个设备
{options.map（option=>(
设备{选项}
))}
{选择的设备(
) : (
请选择一个设备
)}
);
};
ReactDOM.render（，document.getElementById（“app”）

您没有清除所创建的间隔。@zero298我刚刚做了这个，它工作正常`clearInterval（this.interval）；this.interval=setInterval（（）=>{`非常感谢。这真的很有帮助
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);
   }