Используя RxJS и axios, как вы получаете данные по клику в компоненте React?

Question

Я борюсь с тем, как получить данные, используя RxJS и axios onClick в компоненте React.Но все ближе, я думаю.Любые попытки, которые я пытался выполнить, выполняются, когда компонент монтируется, а не onClick, или вообще не запускаются, даже onClick.

В основном, как вызвать onClick и как передать полезную нагрузку.Кажется, что в Интернете нет ничего, что могло бы объяснить это, и я бы ожидал, что это обычная ситуация.

const MyComponent = () => {
  const [data, setData] = useState(null);

  const getData$ = new Subject(observer => {
    axios
      .post(`/my-url/`, **how to get payload to here**)
      .then(response => {
        observer.next(response.data);
        observer.complete();
      })
      .catch(error => {
        observer.error(error);
      });
  });

  useEffect(() => {
    const subs = getData$.subscribe({
      next: res => setData(res),
    });
    return () => subs.unsubscribe();
  }, []);

  return (
    <Button onClick={() => getData$.next(payload)} />
  );
};

Любая помощь приветствуется.

Answer 1

вы можете передать полезную нагрузку в getData следующим образом

const getData$ = (payload) => new Subject(observer => {
    axios.post(`/my-url/`, payload)
        .then(response => {
            observer.next(response.data);
            observer.complete();
        })
        .catch(error => {
            observer.error(error);
        });
});

В основном это просто создает анонимную функцию с именем getData, которая возвращает Subject.Это эквивалентно этому:

const getData$ = function (payload) {
    return new Subject(observer => {
        axios.post(`/my-url/`, payload)
            .then(response => {
                observer.next(response.data);
                observer.complete();
            })
            .catch(error => {
                observer.error(error);
            });
    });
};