ค้นหาเว็บไซต์

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 ของมันมีการเปลี่ยนแปลง?