реагируют, когда используют useeffect для размонтирования, данные не меняются - PullRequest
Новая
       8

реагируют, когда используют useeffect для размонтирования, данные не меняются

0 голосов
/ 28 февраля 2019

Я использую этот код в своем реактивном проекте, когда меняю data1 с помощью usestate, я вижу, что data1 меняется на 1, но когда unmount component data1 имеет значение по умолчанию 0.в чем дело?код: 

useEffect( () => console.log( ["mount",data1] ), [] );
useEffect( () => console.log( ["will update",data1] ) );
useEffect( () => () => console.log( ["unmount",data1] ), [] );

журнал при монтировании и изменении: 

["mount", "0"]
["will update", "0"]
["will update", "2"]
["unmount", "0"]

Ответы [ 2 ]

0 голосов
/ 05 марта 2019

я, наконец, использую эту функцию для получения последних данных при размонтировании

спасибо "nima arefi" за запись 

const useTaskBeforeUnmount = ( calback, ...data ) => {
        const mounted = React.useRef( null );

        React.useEffect( () => {
            mounted.current = true;
            return () => {
                mounted.current = false;
            };
        }, [] );

        React.useEffect(
            () => () => {
                if ( !mounted.current ) {
                    calback( { ...data } );
                }
            },
            [ calback, ...data ],
        );
    };

, затем используйте его в моем компоненте, как этот 

useTaskBeforeUnmount( console.log, data1, data2, data3 );
0 голосов
/ 28 февраля 2019

Когда вы определяете свой эффект как 

useEffect( () => () => console.log( ["unmount",data1] ), [] );

Вы фактически указываете ему запускаться при начальном рендеринге и, следовательно, data1, на который указывает обратный вызов, является начальным значением, которое он унаследовал от замыкания и никогда не обновляется.так как функция больше не инициализируется

Если вообще, по любой причине вы хотите, чтобы data1 был доступен в useEffect, вы должны передать его в качестве второго аргумента useEffect

useEffect( () => () => console.log( ["unmount",data1] ), [data1] );

В этом случае эффект будет очищен при любом изменении data1

Вы также можете использовать useRef для хранения данных и доступа к ним в режиме unmount.

function App() {
  const [data1, setData1] = useState(0);
  const refAttr = useRef();
  useEffect(
    () => () => {
      console.log("unmount", refAttr.current);
    },
    []
  );
  useEffect(() => {
    setInterval(() => {
      setData1(data1 => {
        refAttr.current = data1 + 1;
        return data1 + 1;
      });
    }, 1000);
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Рабочая демоверсия

...