Reset values in useState([]) Reactjs/recharts-CodePudding

I am using recharts within a react component. I am attempting to reset data within:

const [data, setData] = useState([]);

currently I set the data as such:

const getData = (accData) => {
setData((currentData) => [...currentData, accData]);};

The data is sent to getData on a buttonClick. The idea is on every button click reset data and display just the new data. Yet the chart is displaying old data and the new therefore not resetting data. I cant seem to figure out how to reset data completely.

As you can see here the values are not resetting.

https://i.stack.imgur.com/QZmkv.png https://i.stack.imgur.com/dW0T9.png

https://i.stack.imgur.com/XoWpF.png

Button Click

     <Button
          style={{ backgroundColor: "red", fontSize: 15, color: "#FFFFFF" }}
          variant="contained"
          onClick={() => {
            onTestClick("startTest");
          }}
        >
          Start Test
          {<PlayCircleFilledWhiteIcon style={{ marginLeft: 10 }} />}
        </Button>

onTestClick function

const onTestClick = (command) => {
console.log("On Test Command: ", command);
socket.emit("Test_Commands", command);
socket.on("limits", (limitData) => {
  setLimits(limitData);
});

socket.on("test_data", (data) => getData(data));

};

Aidan:

https://i.stack.imgur.com/o65HN.png

First Start Test button click:

https://i.stack.imgur.com/w8uIz.png

Second Start Test button click:

https://i.stack.imgur.com/PngH4.png

LineChart:

<Grid item>
      <LineChart width={1000} height={240} data={data}>
        <defs>
          <linearGradient id="gradient" x1="0" y1="0" x2="100%" y2="0">
            <stop offset="0%" stopColor="red" />

            <stop offset="100%" stopColor="black" />
          </linearGradient>
        </defs>
        <CartesianGrid strokeDasharray="3 3" />
        <Line
          type="monotone"
          dataKey="value"
          stroke="#e82420"
          strokeDasharray="5 5"
        />
        <ReferenceLine y={lowerLimit} stroke="orange" alwaysShow={true} />
        <ReferenceLine y={threshold} stroke="green" alwaysShow={true} />
        <ReferenceLine y={upperLimit} stroke="orange" alwaysShow={true} />
        <XAxis dataKey="Time" />
        <YAxis dataKey="Value" />
      </LineChart>
    </Grid>
    <Grid item>

CodePudding user response：

I guess you don't need currentData then. Just use the new accData when you set your data

setData([accData]);

CodePudding user response：

If you want to reset data on button click, just do so in the onClick like so:

onClick={() => {
    setData([]);
    onTestClick("startTest");
}}

CodePudding user response：

The issue actually had nothing to do with setData() or recharts. The issue was my own fault. I was essentially incrementing socket connections with every click of Start Test. That way first click socket(0) = {data} then second click socket(0) = {data} and socket(1) = {data}. Was not a duplication issue of values but a duplication issue of socket. Thank you to everyone who took a stab at it.

CodePudding user response：

The problem here is that you're destructing the currentData. Remove that from the setData and you'll discard the current data and only keep the new data