如何在ReactJS中链接动作?

阿丽亚娜·布梭(Ariane Brosseau)

如何链行动,以获得url图像属性,当我取帖子列表。

我已经提出了一个获取所有帖子的请求,它为我提供了属性“ image”的链接。

mywebsite / api / recipes?_page = 1

{
    "@context": "/api/contexts/Recipes",
    "@id": "/api/recipes",
    "@type": "hydra:Collection",
    "hydra:member": [
        {
            "@id": "/api/recipes/524",
            "@type": "Recipes",
            "id": 524,
            "category": "/api/categories/11",
            "title": "NewPost",
            "content": "This is a new post",
            "time": "50 minutes",
            "image": [
                "/api/images/37"
            ],
            "slug": "new-post",
            "createdAt": "2020-06-30T10:26:00+00:00",
            "comments": [
                "/api/comments/1359",
                "/api/comments/1360"
            ]
        },
        ........

并且mywebsite / api / images / 37的结果是:

{
    "url": "/images/5efbe9a4a1404818118677.jpg"
}

现在在我的行动

export const recipesListError = (error) => ({
   type: RECIPES_LIST_ERROR,
   error
});

export const recipesListReceived = (data) => ({
   type: RECIPES_LIST_RECEIVED,
   data
});

export const recipesListFetch = (page = 1) => {
   return (dispatch) => {
      dispatch(recipesListRequest());
      return requests.get(`/recipes?_page=${page}`)
         .then(response => dispatch(recipesListReceived(response)))
         .catch(error => dispatch(recipesListError(error)));
   }
};

所以第一个请求是recipesListFetch,现在缺少的是第二个获取图像的请求,然后返回url,这样我就可以直接访问每个帖子的图像

如果我正在使用symfony api平台,最简单的解决方案是使用normalization_context组,但是它仍然为我提供了image属性的链接,我认为这是因为ManyToMany关系

dh

似乎没有必要进行标准化。图像和注释特定于配方。

使then块回调作为异步乐趣,然后在内部进行块循环recipes,然后先通过image数组循环,然后再通过数组循环,并对图像进行api调用并等待它。

export const recipesListFetch = (page = 1) => {
  return (dispatch) => {
    dispatch(recipesListRequest());
    return requests
      .get(`/recipes?_page=${page}`)
      .then(async (response) => {
        //make then callback as async fun
        const recipes = response["hydra:member"];
        const imagesForTheRecipie = [];
        for (let i = 0; i < recipes.length; i++) {//loop thru recipies
          for (let j = 0; j < recipes[i].image.length; j++) {//loop thru images for each recipie
            const imageUrl = recipes[i].image[j];//grab the image url
            const image = await requests.get(`/${imageUrl}}`);
            imagesForTheRecipie.push(image);
          }
          recipes[i].image = imagesForTheRecipie; //mutate the object which will directly update the response
        }
        dispatch(recipesListReceived(response));
      })
      .catch((error) => dispatch(recipesListError(error)));
  };
};

注意-如果需要,normalise则可以选择将数据标准化,categories因为许多食谱将使用同一类别。在这种情况下,您将必须重新构造减速器。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在MVC 4中为一个控制器实现面包屑但链接多个动作

来自分类Dev

如何在MVC中阻止动作的执行?

来自分类Dev

如何在Xcode 6中将按钮链接到动作?

来自分类Dev

如何在动作标签中传递参数?

来自分类Dev

如何在查询中模拟点击动作

来自分类Dev

如何在Popoverview中添加UIBarButtonItem动作?

来自分类Dev

如何在MVC中的Ajax动作链接中包含AntiForgeryToken?

来自分类Dev

如何在Redux中取消/忽略动作

来自分类Dev

@user如何在Rails中显示动作

来自分类Dev

如何在ReactJs中单击动态生成的“链接”时将值传递给页面?

来自分类Dev

我如何在reactjs中使异步函数从redux动作中调用另外两个函数

来自分类Dev

如何在javascript中延迟动作

来自分类Dev

如何在liferay中为超链接创建动作URL?

来自分类Dev

如何在SpriteKit中更改动作

来自分类Dev

如何在php中的一种形式下为两个不同的按钮链接不同的动作?

来自分类Dev

如何在查询中模拟点击动作

来自分类Dev

如何在Python中链接

来自分类Dev

如何在动作脚本中添加setInterval()?

来自分类Dev

如何在ReactJS中将数据从元素传递到动作?

来自分类Dev

如何在yii 2.0中的超链接中调用控制器动作

来自分类Dev

如何在我的动作链接中获取文本框的值?

来自分类Dev

CSS:如何在<a>链接上切换开关动作?

来自分类Dev

如何在MVC中显示活动的动作链接

来自分类Dev

如何在Python中重复动作

来自分类Dev

如何在ReactiveKit中对动作建模?

来自分类Dev

如何在reactjs中动态创建链接?

来自分类Dev

如何在PHP中链接?

来自分类Dev

如何在指定的 reactJS 文件中添加 bootsrap 链接?

来自分类Dev

如何在 SSR ReactJS 中链接本地 JS 和 CSS 文件?

Related 相关文章

热门标签

归档