Неправильный вызов API

Question

  const [clientIfFromSearchWebitel, setClientIfFromSearchWebitel] = useState(
    undefined
  );


    useEffect(() => {
    console.log('clientIfFromSearchWebitel', clientIfFromSearchWebitel);
    if (clientIfFromSearchWebitel && clientIfFromSearchWebitel !== undefined && clientIfFromSearchWebitel !== '') {

      axios
      .post('https://extapi.megabank.ua/dev/ops/api/v1/getEntity/CASES', {
        filters: [
          {
            comparison: 'eq',
            fieldName: 'client_id',
            fieldValue: clientIfFromSearchWebitel
              ? clientIfFromSearchWebitel
              : undefined,
            operation: 'OR',
          },
        ],
      })
      .then(data => setFilterData(data.data));
    }else {
      axios
      .post('https://extapi.megabank.ua/dev/ops/api/v1/getEntity/CASES', {
        filters: [],
      })
      .then(data => setFilterData(data.data));
    }

  }, [clientIfFromSearchWebitel])

У меня есть состояние clientIfFromSearchWebitel, и когда компонент впервые появляется, это состояние не определено, когда компонент обновляется снова, значение записывается к нему, на основании которого должен вызываться API, но API вызывается вместо 1 раза - 2 раза, в связи с тем, что 1-й раз, когда состояние не определено, 2-й со значением, как можно исправить эту ситуацию?

Answer 1

Я думаю, вы говорите о https://reactjs.org/docs/hooks-faq.html#can -i-run-an-effect-only-updates

const fetchNow = useRef(false);

useEffect(() => {
  if (fetchNow.current) {
    // do fetch now -- your existing code
  }
});

Где бы вы ни делали setClientIfFromSearchWebitel() замену с fetchNow.current = true

Таким образом, вы можете избежать использования useState и наличия условий в useEffect.