(redux)Uncaught(in promise)TypeError:result.map不是函数或其返回值不可迭代

fcwjkofz  于 2023-05-18  发布在  其他
关注(0)|答案(1)|浏览(181)

我试图在redux工具包中构建一个查询,用于获取和过滤搜索。但我得到这个错误在我的控制台
Uncaught(in promise)TypeError:result.map不是函数或其返回值不可迭代
这是我的代码

getSearchByValue: builder.query({
        // Will make a request like https://pokeapi.co/api/v2/pokemon/bulbasaur
        query: (value) => `/search?q=${value}`,
        providesTags: (result, err, args) =>
        result
          ? [{ type: 'Post', value: 'LIST' }, ...result.map(({ value }) => ({ type: 'Post', value }))]
          : [{ type: 'Post', value: 'LIST' }],

这是我的post文件

const Posts = ({ value }) => {
  
  const { data: posts, isLoading } =   useGetSearchByValueQuery
  (value, {
    
      refetchOnMountOrArgChange: true,
    });
    
      const [filteredPosts, setFilteredPosts] = useState([]);

    

useEffect(() => {
    setFilteredPosts(posts?.filter(post => post.title.toLowerCase().includes(value.toLowerCase())));
  }, [value, posts]);

  return isLoading ? (
    <LoadingSpinner />
  ) : (
    filteredPosts && <Postsabc posts={filteredPosts} enableImages={false} />
  );
};

  const Wrapper = tw.div`bg-blue`;

export default Posts;

value是用户在搜索栏中键入的搜索值
我试了很多方法,但我不能理解

js5cn81o

js5cn81o1#

您看到的错误消息表明providesTags函数中的结果值不是数组,因此没有map方法。如果对/search端点的请求返回非数组值或请求中有错误,则可能发生这种情况。
要调试此问题,可以首先在providesTags函数中记录结果值,以查看它是什么类型的值。您还可以向查询添加catch块,以记录可能发生的任何错误。

你的代码应该是这样的,包括这些变化:

getSearchByValue: builder.query({
  query: (value) => `/search?q=${value}`,
  providesTags: (result, error, args) => {
    console.log('result:', result);
    if (error) {
      console.error(error);
      return [{ type: 'Post', value: 'LIST' }];
    }
    if (result) {
      return [
        { type: 'Post', value: 'LIST' },
        ...result.map(({ value }) => ({ type: 'Post', value })),
      ];
    }
    return [{ type: 'Post', value: 'LIST' }];
  },
})

通过记录结果值并检查错误,您应该能够确定问题的根本原因并对代码进行任何必要的更改

相关问题