React 中有沒有辦法只重繪 組件而不是視窗而是組件本身？這樣我就可以重新觸發反應查詢。我知道我可以使用useEffect()但有什么方法可以做到？
所以我知道我可以做，比如：
useEffect(() => {
setFetchData(result);
}, [result]);
這將觸發組件在result更改時重新渲染。但是你怎么能有一個按鈕來手動重繪 組件或重新渲染它。
uj5u.com熱心網友回復：
如果您嘗試重繪 組件只是為了重新觸發來自 的查詢react-query，則最好使用hookrefetch提供的功能useQuery。
const { data, refetch, ... } = useQuery(...);
return (
<>
{(data?.yourQuery?.results || []).map(result => ...)}
<button onClick={refetch}>Refetch!</button>
</>
)
如果data呼叫后有一些變化refetch，組件會自動重新渲染。
uj5u.com熱心網友回復：
您必須更改狀態才能觸發組件重新渲染。因此，您可以創建任何狀態并通過單擊按鈕來更改它：
const [value, setValue] = useState(false)
return (
...other jsx code
<button onClick={()=>setValue(!value)}>Trigger re-render</button>
)
演示
uj5u.com熱心網友回復：
你可以這樣做：
const [reload, setReload] = useState()
useEffect(() => {
// Add your code here
}, [reload]);
return (
<button onClick={() => setReload(!reload)} >Reload</button>
);
并且無論何時單擊按鈕，它都會執行 useEffect 中的代碼并更新組件。
uj5u.com熱心網友回復：
你可以做這樣的事情
const [num, setNum] = useState(0)
return
(
<React.Fragment>
{num}
<button onClick={()=>setNum({prevNum => prevNum 1)}>Click to Render</button>
</React.Fragment>
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/346439.html
標籤：javascript 反应
上一篇：通過匹配部分值合并兩個物件陣列