reactjs - useEffect จะไม่ถูกเรียกเมื่อ deps เปลี่ยนถ้าใช้ useSelector จาก react-redux
นี่คือตัวอย่างโค้ดของฉัน:
import { useDispatch, useSelector } from 'react-redux';
import { updateMyData } from '../features';
const MyComponent = ({ list }) => {
const dispatch = useDispatch();
// select myData from redux store
const someData = useSelector((state) => state.myData);
React.useEffect(() => {
// YOU WILL NOT SEE THIS LINE
console.log('useEffect', someData);
}, [someData]);
// each time I can see newly changed data
console.log('someData', someData);
const handleClick = () => {
const newData = list.find((l) => l.name === 'myName');
// change myData, in my case it is some pagination, and I select newData from existing list
dispatch(updateMyData(newData));
};
return <div onClick={handleClick}>{'Hello world!'}</div>;
};
ในกรณีของฉัน ฉันมีรายการของไอเท็ม และเมื่อฉันกดปุ่มบางปุ่มเพื่อเปลี่ยนมัน (ใน redux store) someData เปลี่ยนแปลง, MyComponent ทำการ rerender แต่ useEffect ไม่ถูกเรียก
useEffect ถูกเรียกใช้เฉพาะในระหว่างการเรนเดอร์ครั้งแรกเท่านั้น
ทำไม useEffect ถึงยังไม่ถูกเรียกเมื่อ deps ของมันมีการเปลี่ยนแปลง?