使用 getContractsFromAPI 操作，我獲得 API 中的合約串列，然后使用 useState 和 renderContracts，我將它們顯示在頁面上，但這會啟動對 useEffect 的無休止呼叫
const [contracts, setContracts] = useState({});
const contractsList = useAppSelector(({ contractsList }) => contractsList);
useEffect(() => {
dispatch(getContractsFromAPI());
setContracts(contractsList);
}, [contractsList, dispatch]);
return (
<div>
<h2>Contracts:</h2>
<ul className={styles.contractsList}>{renderContracts(contracts)}</ul>
</div>
);
如何解決問題？我試圖從 useEffect 中洗掉 [contractsList, dispatch]，但是當頁面打開時沒有發生初始渲染
uj5u.com熱心網友回復：
把 dispatch(getContractsFromAPI()); 在它自己的使用效果
useEffect(() => {
setContracts(contractsList);
}, [contractsList, setContracts]);
useEffect(() => {
dispatch(getContractsFromAPI());
}, [dispatch, getContractsFromAPI]);
你得到了一個無限回圈，因為 getContractsFromAPI 顯然編輯了 contractList。簡單的解決方案是在 useEffect 中使用 getContractsFromAPI，它不會監視 contractList 的變化
uj5u.com熱心網友回復：
如果您真的不需要組件本地狀態中的契約的淺拷貝，請擺脫本地狀態并僅從選擇器中使用它們。
function ContractsComponent() {
const contracts = useAppSelector(({ contractsList }) => contractsList);
// Get contracts from API on mount
useEffect(() => {
dispatch(getContractsFromAPI());
}, [dispatch]);
if (!contracts) return <>Loading...</>;
return (
<div>
<h2>Contracts:</h2>
<ul className={styles.contractsList}>{renderContracts(contracts)}</ul>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/345104.html
標籤：javascript 反应 还原 反应还原 前端