[英]Manually refresh or re-render component onClick in React
Is there a way in React to just refresh a component not the window but the component itself? React 中有没有办法只刷新组件而不是窗口而是组件本身? This is so I can re-trigger a react-query.
这样我就可以重新触发反应查询。 I know I can use
useEffect()
but what would be the way to do it?我知道我可以使用
useEffect()
但是这样做的方法是什么?
So I know I could do, something like:所以我知道我可以做,比如:
useEffect(() => {
setFetchData(result);
}, [result]);
This would trigger the component to re-render when result
changes.这将在
result
更改时触发组件重新渲染。 But how can you have a button that would manually refresh the component or re-render it.但是你怎么能有一个按钮来手动刷新组件或重新渲染它。
You have to change a state to trigger component re-render.您必须更改状态才能触发组件重新渲染。 So, you can create any state and change it by clicking on a button:
因此,您可以创建任何状态并通过单击按钮来更改它:
const [value, setValue] = useState(false)
return (
...other jsx code
<button onClick={()=>setValue(!value)}>Trigger re-render</button>
)
If you are trying to refresh the component just to re-trigger a query from react-query
, you'd better use refetch
function provided by useQuery
hook.如果你想只刷新该组件重新触发从查询
react-query
,你最好使用refetch
所提供的功能useQuery
挂钩。
const { data, refetch, ... } = useQuery(...);
return (
<>
{(data?.yourQuery?.results || []).map(result => ...)}
<button onClick={refetch}>Refetch!</button>
</>
)
If there are some changes of data
after calling refetch
, the component will be automatically rerendered.如果调用
refetch
后data
有一些变化,组件会自动refetch
渲染。
You can do it like this:你可以这样做:
const [reload, setReload] = useState()
useEffect(() => {
// Add your code here
}, [reload]);
return (
<button onClick={() => setReload(!reload)} >Reload</button>
);
And anytime you click the button it will execute the code inside the useEffect and update the component.并且无论何时单击按钮,它都会执行 useEffect 中的代码并更新组件。
You can do something like this你可以做这样的事情
const [num, setNum] = useState(0)
return
(
<React.Fragment>
{num}
<button onClick={()=>setNum({prevNum => prevNum + 1)}>Click to Render</button>
</React.Fragment>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.