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

Question

我正在使用prev state来附加数组，我需要在单击按钮时将整个数组设置为空数组。我尝试使用setArray(｛｝(，但它不起作用。如何在按钮上完全将数组设置为空数组单击

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

首先，您没有将状态初始化为数组？所以，首先让我们这样做；

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

你的功能也应该是这样的；

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

还应该调用clear函数；

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

Answer 2

您必须执行函数clear，因为在代码中您只传递声明的函数。

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

onClick={()=>clear()}或onClick={clear}必须更换onClick={()=>clear}