Jak wyzwolić podpięcie useEffect, gdy state.providers["providerId"].isProviderRowValid się zmieni?

Nie mogę wstawić state do tablicy zależności, ponieważ spowoduje to nieskończoną pętlę z powodu późniejszej aktualizacji stanu do isSubmitDisabled.

  const providerRowHandler = (providerId: string, isRowValid: boolean): void => {
    setState({
      ...state,
      providers: {
        ...state.providers,
        [providerId]: {
          ...state.providers[providerId],
          isProviderRowValid: isRowValid
        }
      }
    });
  };

  useEffect(() => {
    console.log('state.providers changed, update form state');
    const providers = { ...state.providers };
    const isRowsValid = Object.values(providers)
      .map(k => k.isProviderRowValid)
      .every(row => row === true);
    setState({
      ...state,
      isSubmitDisabled: isRowsValid === false
    });
  }, [// how to watch isProviderRowValid only as a state update here ]);
2
RyanP13 30 czerwiec 2020, 23:38

2 odpowiedzi

Najlepsza odpowiedź

Myślę, że możesz uruchomić, gdy zmienił się stan. Dostawcy:

useEffect(() => {
  setState((state) => {
    console.log(
      'state.providers changed, update form state'
    );
    const isSubmitDisabled =
      Object.values(state.providers)
        .map((k) => k.isProviderRowValid)
        .every((row) => row === true) === false;
    if (isSubmitDisabled !== state.isSubmitDisabled) {
      //need to change state
      return {
        ...state,
        isSubmitDisabled,
      };
    }
    //do nothing
    return state;
  });
}, [state.providers]);
1
HMR 30 czerwiec 2020, 21:36
  function getAllProviderRows() {
    const providers = { ...state.providers };
    return Object.keys(providers).map(item => providers[item].isProviderRowValid);
  }

  useEffect(() => {
    const providers = { ...state.providers };
    const isRowsValid = Object.values(providers)
      .map(v => v.isProviderRowValid)
      .every(row => row === true);
    setState({
      ...state,
      isSubmitDisabled: isRowsValid === false
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [getAllProviderRows]);

Nie mogę obecnie zalogować się do mojej aplikacji, ale to powinno działać

0
RyanP13 30 czerwiec 2020, 21:18