将图像与ReactJS中的帖子相关联

debugcn 发表于 Dev

阿丽亚娜·布梭（Ariane Brosseau）

这是一个返回帖子列表和每个帖子中的图像的操作。以前，此操作仅返回帖子列表。如何使Reducer和组件关联哪些图像属于哪个帖子？

行动

export const recipesListFetch = (page = 1) => {
   return (dispatch) => {
      dispatch(recipesListRequest());
      return requests
         .get(`/recipes?_page=${page}`)
         .then(async (response) => {
            const recipes = response["hydra:member"];
            const imagesForRecipe = [];
            for (let i = 0; i < recipes.length; i++) {
            for (let j = 0; j < recipes[i].image.length; j++) {
               const imageUrlProperty = recipes[i].image[j];
               const image = await requests.get(`${imageUrl}`);

               imagesForRecipe.push(image);
            }
            recipes[i].image = imagesForRecipe;
            }
            dispatch(recipesListReceived(response));
         })
         .catch((error) => dispatch(recipesListError(error)));
   };
};

减速器

export default(state = {
   posts: null,
   isFetching: false,
   currentPage: 1,
   pageCount: null
}, action) => {
   switch (action.type) {
      case RECIPES_LIST_REQUEST:
         state = {
            ...state,
            isFetching: true,
         };
         return state;
      case RECIPES_LIST_RECEIVED:
         state = {
            ...state,
            posts: action.data['hydra:member'],
            pageCount: hydraPageCount(action.data),
            isFetching: false,
         };
         return state;
      case RECIPES_LIST_ERROR:
         return {
            ...state,
            isFetching: false,
            posts: null,
         };
      case RECIPES_LIST_ADD:
         state = {
            ...state,
            posts: state.posts ? state.posts.concat(action.data) : state.posts
         };
         return state;
      case RECIPES_LIST_SET_PAGE:
         return {
            ...state,
            currentPage: action.page
         };
      default:
         return state;
   }
}

零件

class RecipesList extends React.Component {

   render() {
      const {posts} = this.props;
      if (null === posts || 0 === posts.length) {
         return (<Message message="Aucune recette trouvé"/>);
      }

      return (
         <div className="container-fluid padding pt-5 responsive-card">
            <div className="row padding">
               {posts && posts.map(post => (
                  <div className="col-md-6 col-lg-3 add-padding" key={post.id}>
                     <Link to={`/recipes/${post.id}`}>
                        <div className="card mb-3 mt-3" >
                        <img src={???} alt="" className="img-recipe-list"/>
                           <div className="card-body">
                              <h3>{post.title}</h3>
                              <p className="card-text d-flex justify-content-center">
                                 <small className="text-muted">{post.time}</small>
                              </p>
                           </div>
                        </div>
                     </Link>
                  </div>
               ))}
            </div>
         </div>
      )
   }
}

export default RecipesList;

我想为每个帖子绘制一张带有图片和帖子标题的卡片。

jpmarks

我看到的第一个问题是您没有返回imagesForRecipe，而是返回了响应。

export const recipesListFetch = (page = 1) => {
   return (dispatch) => {
      dispatch(recipesListRequest());
      return requests
         .get(`/recipes?_page=${page}`)
         .then(async (response) => {
            // i strongly advice to not mutate the response object
            // im not sure how your request method works, but if response is immutable
            // your recipes will never actually get added
            // to prevent that you can dispatch a new object instead of the response
      
            const recipes = response["hydra:member"];

            for (let i = 0; i < recipes.length; i++) {
              // move this into the first for loop, becuase you want to start with 
              // an empty array for every recipe
              const imagesForRecipe = [];

              for (let j = 0; j < recipes[i].image.length; j++) {
               const imageUrlProperty = recipes[i].image[j];
               const image = await requests.get(`${imageUrl}`);

               imagesForRecipe.push(image);
              }
              // here you assign only the images for a specific recipe
              recipes[i].image = imagesForRecipe;
            }
            // return a new object with updated recipes
            const editedResponse = { ...response, "hydra:member": recipes };

            dispatch(recipesListReceived(editedResponse));
         })
         .catch((error) => dispatch(recipesListError(error)));
   };
};

我希望这有帮助：）

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

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