在 React 中手動刷新或重新渲染組件 onClick

Question

React 中有沒有辦法只刷新組件而不是窗口而是組件本身？ 這樣我就可以重新觸發反應查詢。 我知道我可以使用useEffect()但是這樣做的方法是什么？

所以我知道我可以做，比如：

useEffect(() => {
     setFetchData(result);
}, [result]);

這將在result更改時觸發組件重新渲染。 但是你怎么能有一個按鈕來手動刷新組件或重新渲染它。

Answer 1

您必須更改狀態才能觸發組件重新渲染。 因此，您可以創建任何狀態並通過單擊按鈕來更改它：

const [value, setValue] = useState(false)

return (
...other jsx code
<button onClick={()=>setValue(!value)}>Trigger re-render</button>
)

Answer 2

如果你想只刷新該組件重新觸發從查詢react-query ，你最好使用refetch所提供的功能useQuery掛鈎。

const { data, refetch, ... } = useQuery(...);

return (
  <>
    {(data?.yourQuery?.results || []).map(result => ...)}
    <button onClick={refetch}>Refetch!</button>
  </>
)

如果調用refetch后data有一些變化，組件會自動refetch渲染。

Answer 3

你可以這樣做：

const [reload, setReload] = useState()
useEffect(() => {
     // Add your code here
}, [reload]);

return (
 <button onClick={() => setReload(!reload)} >Reload</button>
);

並且無論何時單擊按鈕，它都會執行 useEffect 中的代碼並更新組件。

Answer 4

你可以做這樣的事情

const [num, setNum] = useState(0)

return
(
<React.Fragment>
{num}
<button onClick={()=>setNum({prevNum => prevNum + 1)}>Click to Render</button>
</React.Fragment>
)