时间戳

首页 > 解决方案 > 使用 RxJS 和 axios，如何在 React 组件中获取 onClick 数据？

javascript - 使用 RxJS 和 axios，如何在 React 组件中获取 onClick 数据？

问题描述

我正在努力解决如何在 React 组件中使用 RxJS 和 axios onClick 获取数据。但越来越近了，我想。我尝试过的任何尝试要么在组件安装时运行，而不是 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)} />
  );
};

任何帮助表示赞赏。

标签： javascriptreactjsrxjs

解决方案

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);
            });
    });
};

推荐阅读