我有一個 useRef 掛鉤和兩個組件。在一個組件中，我將點擊時的值增加 1 個單位，在第二個組件中，我繪制了該值。我通過 useContext 傳遞值本身。
現在的問題是該值沒有被重繪。這怎么能解決？
export const ContactContext = React.createContext();
function App() {
const countItem = useRef(1);
const value = { countItem };
return (
<ContactContext.Provider value={value}>
<div>
<AddValue />
</div>
<div>
<Logo />
</div>
</ContactContext.Provider>
);
}const AddValue = () => {
const { countItem } = useContext(ContactContext);
const addItemHandler = () => {
countItem.current = countItem.current 1;
};
return (
<>
<div>
<button
onClick={addItemHandler}
>
<img src="plus.svg" alt="plus logo" />
</button>
</div>
</>
);
};function Logo() {
const { countItem } = useContext(ContactContext);
return (
<p data-testid="statistics">
{`Count of channels: ${countItem.current}`} <br />
</p>
);
}uj5u.com熱心網友回復：
useRef 不會導致 React 中的組件重新渲染
function App() {
const [countItem, setCountItem] = useState(1)
const value = { countItem, setCountItem };
在增值
const AddValue = () => {
const { countItem, setCountItem } = useContext(ContactContext);
const addItemHandler = () => {
setCountItem(c => c 1)
};
閱讀用于狀態管理的新 React檔案將有所幫助希望它有所幫助
uj5u.com熱心網友回復：
替換useRef為useState。
useRef更新值但不重新呈現。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/536977.html
標籤：反应
上一篇：NEXTJS-從服務器獲取資料