Реагировать Функциональный компонент, вызывающий другую функцию или метод вызова из контекста с некоторым условием

Question

У меня проблема с вызовом функции внутри функционального компонента ниже state.locations.length, автоматически увеличивается, и я хочу, чтобы, если оно достигло 4 (> 3), я мог вызвать функцию внутри контекста, чтобы сбросить его

, так как я уже useEffect для других функций, я не могу его использовать.

проблема, как мне поставить, если внутри места, где я отметил код ниже

  const TrackListScreen = ({ navigation }) => {
    const { 
      state, 
      addLocation, 
      fillTrackData, 
      saveTrack,
    } = useContext(LocationContext);  


    const sendTrackAuto = async () => {
      console.log('sendTrackAuto running')
    };

    return <Container>
      <Text h3>{ state.locations.length }</Text>

      // how do I call function sendTrackAuto or saveTrack context 
      // here is what I want 
      // if state.locations.length > 3 then I want call sendTrackAuto or saveTrack automatically without using button keypress

      // below is the one that I think but I don't think it's correct
      { (state.locations.length > 3) ? sendTrackAuto : null }
    </Container>;
  };

Answer 1

Используйте хук useEffect для создания побочного эффекта, используя state.locations.length в массиве зависимостей. Эффект запускается при обновлении значения длины.

Условное срабатывание эффекта

const TrackListScreen = ({ navigation }) => {
  const { 
    state, 
    addLocation, 
    fillTrackData, 
    saveTrack,
  } = useContext(LocationContext);  

  const sendTrackAuto = async () => {
    console.log('sendTrackAuto running')
  };

  useEffect(() => {
    if (state.locations.length > 3) {
      sendTrackAuto();
      // or do anything else
    }
  }, [state.locations.length]);

  return (
    <Container>
      <Text h3>{ state.locations.length }</Text>
    </Container>
  );
};