state data is updating without set state method

i am trying to use the state hook in my react native app. But without calling the set state method, my state value is updating

export default function Interface(){
    const [requireddata,setrequireddata]= useState({vehiclesfulldata:[]});
    const [requireddataflag,setrequireddataflag]=useState(true);

    useEffect(()=>{
        const interfacedata= async function fetchinterfacedata() {
            const resultdata=  await Fetchdata(postdata).then(async(response) => {
                let responsedata=JSON.parse(response);
                return responsedata
            })

            setrequireddata({...requireddata, vehiclesfulldata:JSON.parse(resultdata.fullvehicledata)});

        }
        interfacedata();
       
    },[requireddataflag])


    const fleetsearchdata=(searchdata)=>{ 
        let fleetdetails=requireddata.vehiclesfulldata;
        if(searchdata!=""){
            searchdata=searchdata.toLowerCase();
            fleetdetails.forEach((g)=> {
                g.fleets.forEach((s)=> {
                    s.fleets = s.fleets.filter(f => f.name.toLowerCase().indexOf(searchdata) > -1);
                })
            })

        }
        console.log(fleetdetails);
        console.log(requireddata.vehiclesfulldata);
        // console.log(fleetdetails); 
    }

    return (
        <SafeAreaView style={{flex: 1}}>
            <View style={[Interfacestyle.fleetsearchview]}> 
                <Input
                    placeholder='Search Fleet' 
                    onChangeText={(value)=>{fleetsearchdata(value)}}
                    inputContainerStyle={Interfacestyle.inputcontainerfleetsearch}  
                    containerStyle={Interfacestyle.inputfleetsearch} 
                    style={Interfacestyle.fleetsearch}  
                    rightIcon={{ type: 'font-awesome', name: 'search' ,color:'#C9C9C9',size:17,solid:'true'}}
                    rightIconContainerStyle={Interfacestyle.fleetsearchIcon}
                />  
            </View> 
        </SafeAreaView>
    )

}

the above is my code. Initially i fetch the data by using fetch api, which get the result as

Array [
  Object {
    "GroupId": 1,
    "fleets": Array [
      Object {
        "GroupId": 1,
        "StationId": null,
        "fleets": Array [
          Object {
            "GroupId": 1,
            "StationId": null,
            "fleetId": 316,
            "name": "TM-175 PLATE-286398",
          },
        ],
        "name": "General",
      },
    ],
    "name": "TRUCK MIXER",
  },
]

while calling the function fleetsearchdata, the state value in requireddata is updating without calling setrequireddata function.

kindly help me.

Answer

The problem is that in your fleetsearchdata function you are assigning your state to a variable (fleetdetails=requireddata.vehiclesfulldata) and in this case any changes to fleetdetails will be made to the original variable since you are not making a copy but an assignment. So you would have to make a copy and then do the filtering. You can find more info here: https://javascript.plainenglish.io/how-to-deep-copy-objects-and-arrays-in-javascript-7c911359b089

I would recommend using lodash’s _.cloneDeep