在 Reactjs 中使用 prevState 时如何将数组设置为空数组

Question

I am using prev state to append the array and I need to set the whole array to an empty array on the button clicked. I tried using setArray({}) but it doesn't work. how to completely set the array to an empty array on button click

import React, {useState,useEffect} from 'react'

function testFunction() {

    const [features, setFeatures] = useState({});

    const add = (key,value) => {
        setFeatures((prevFeatures)=>({...prevFeatures,[key]: value}));
    }

    const clear =() =>{
        setFeatures({});
    }

    return (
        <div>
            
            <div>
                <select onChange={(event)=>add(event.target.name,event.target.value)}>
                    <option name="opt1" value="val1">Value1</option>
                    <option name="opt2" value="val2">Value2</option>
                    <option name="opt3" value="val3">Value3</option>
                    <option name="opt4" value="val4">Value4</option>
                    <option name="opt5" value="val5">Value5</option>
                </select>
            </div>

            <button type="reset" value="reset" onClick={()=>clear}>Reset</button>

        </div>
    )
}
export default testFunction

Answer 1

First of all you didn't initialize your state as an array? So first let's do that;

const [features, setFeatures] = useState([])

also your functions should be like this;

 const add = (key,value) => {
        setFeatures((prevFeatures)=>([...prevFeatures, {[key]: value} ])); // key, value added to array of Objects
    }

    const clear =() =>{
        setFeatures([]); // setting empty array
    } 

also you should call clear function;

<button type="reset" value="reset" onClick={()=>clear()}>Reset</button>

Answer 2

You must execute your function clear because in your code you are only passing the declared function.

<button type="reset" value="reset" onClick={()=>clear}>Reset</button>

onClick={()=>clear} must be replaced for onClick={()=>clear()} or onClick={clear}