我有一个代码：
const page = useRef(1); const nextPage = useRef(page.current + 1);
字符串我想知道为什么nextPage不会更新时，我更新page？既然nextPage引用了正在更新的page.current？
nextPage
page
page.current
page.current = 5;
型
cwdobuhd1#
如果这和你预期的一样，nextPage = page.current + 1和nextPage = useRef(page.current + 1)中的至少一个。传入useRef的参数只在第一次渲染时使用一次，之后它会保留结果，直到您更改它。那和引用没有任何关系，它只是接受值的原样
nextPage = page.current + 1
nextPage = useRef(page.current + 1)
useRef
pvcm50d12#
我认为你需要创建一个计算值。useRef更新不应该在React中的DOM上呈现...相反，你应该使用useState钩子，useMemo来计算和渲染，像这样：
function App() { const [page, setPage] = useState(1); const nextPage = useMemo(() => page + 1, [page]); return ( <div> <p>{nextPage}</p> <button onClick={() => setPage((prevPage) => prevPage + 1)}> {page} </button> </div> ); }
字符串
2条答案
按热度按时间cwdobuhd1#
如果这和你预期的一样，
nextPage = page.current + 1和nextPage = useRef(page.current + 1)中的至少一个。传入
useRef的参数只在第一次渲染时使用一次，之后它会保留结果，直到您更改它。那和引用没有任何关系，它只是接受值的原样pvcm50d12#
我认为你需要创建一个计算值。
useRef更新不应该在React中的DOM上呈现...
相反，你应该使用useState钩子，useMemo来计算和渲染，像这样：
字符串