reactjs - 刷新按钮点击 react 的数据

Question

我尝试构建一个刷新按钮来刷新我的 react 表数据，这是我的代码

const [data, setData] = useState([]);
const [loadingData, setLoadingData] = useState(true);
const [refreshData, setRefreshData] = useState(false);

const getData = async ()=>{
 const response = await axios.get('http://localhost:5000/in-data')
 setData(response.data)
 setLoadingData(false);
}

useEffect(()=>{
 getData()
},[refreshData])

这是按钮

<button
  className="button"
  type="button"
  onClick={setRefreshData(!RefreshData)}         
>
  Refresh
</button>

结果是Error: Infinite Looping, re-render达到最大次数。任何人都知道如何以正确的方式做到这一点？

Answer 1

这是立即执行函数，而不是点击按钮:

onClick={setRefreshData(!RefreshData)}

该函数的结果随后将被设置为点击处理程序，但由于该结果导致重新呈现，因此该点没有实际意义。

您想传递一个函数引用作为点击处理程序，而不是函数的执行(当然，除非该执行返回您想要的函数引用)。像这样:

onClick={() => setRefreshData(!RefreshData)}