反应 - 反冲异步请求

问题描述

我开始玩后坐力，但我在异步请求方面遇到了问题。我或多或少地解决了它，但只是想确定我的方法是否正确，基本上我希望使用给定的参数执行获取请求，

我有我的原子文件，我在其中存储我的两个原子，一个存储我获取的 json“commentState”，一个存储我的参数“commentId”，以及从原子获取参数并在 ID 更高时执行获取请求的选择器大于 0。

const getComment = selector({
  key: "getComment",get: async ({ get }) => {
    const id = get(commentId);
    if (id) {
      try {
        const response = await fetchComment(id);
        return response;
      } catch (e) {
        return null;
      }
    } else {
      return null;
    }
  },});

export const commentsstate = atom<amountOfCommentsType | null>({
  key: "commentState",default: getComment,});

export const commentId = atom<number>({
  key: "commentId",default: 0,});

然后在我的反应组件中，我通过 useRecoilValue 获取数据，并使用触发 atom 重新获取数据的 useRecoilState 更改参数。

export function Comments() {
  const commentDate = useRecoilValue(commentsstate);
  const [_,setCommentDataId] = useRecoilState(commentId);

  const [commentNumber,setCommentNumber] = useState(0);


  return (
    <div className={styles.row}>
...
    </div>
  );
}

我想问一下这种方法是否正确，是否可以更改：

const commentDate = useRecoilValue(commentsstate);

到

const [commentDate,setCommentDate] = useRecoilStateLoadable(commentsstate(param));

然后在选择器中以某种方式传递这个参数而不需要创建额外的原子？我试图寻找一些解决方案，但找不到。

像这样：

const getComment = selector({
  key: "getComment",get: async ({ get,someparam }) => {

    if (id) {
      try {
        const response = await fetchComment(someparam);
        return response;
      } catch (e) {
        return null;
      }
    } else {
      return null;
    }
  },});

解决方法

selectorFamily 是您正在寻找的模式。 selectorFamily(options)

selectorFamily 是一种强大的模式，类似于选择器，但允许您将参数传递给选择器的 get 和 set 回调。