时间戳

首页 > 解决方案 > 道具未从 fetch 调用中显示

reactjs - 道具未从 fetch 调用中显示

问题描述

我正在尝试显示食谱，但不确定我是否正确设置了此设置。我通过获取获取请求从 Rails api 中提取食谱。目前没有任何显示。

这是我的食谱容器：

import React, { Component } from 'react'
import RecipeList from '../components/RecipeList'
import RecipeInput from '../components/RecipeInput'
import { connect } from 'react-redux'
import { postRecipes } from '../actions/postRecipes.js'
import { getRecipes } from '../actions/getRecipes'


class RecipeContainer extends Component{
    constructor(props){
        super(props)
    }

    componentDidMount(){
        getRecipes()
      }
    

    render(){
        return (
            <div>
               <RecipeInput postRecipes={this.props.postRecipes} /> 
               <RecipeList getRecipes={this.props.recipes} />
            </div>
        )
    }

    

}

const mapStateToProps = state =>({
   recipes: state.recipes
})


const mapDispatchToProps = dispatch =>{
    return{
    postRecipes: (recipe) => dispatch(postRecipes(recipe)),
    getRecipes: () => dispatch(getRecipes())
    // deleteRecipe: id => dispatch({type: 'Delete_Recipe', id})
    }
}



export default connect(mapStateToProps,mapDispatchToProps)(RecipeContainer)

这是我的获取请求....请注意，我在这里返回了我的食谱组件。

export const getRecipes = () => {
  
    const BASE_URL = `http://localhost:10524`
    const RECIPES_URL =`${BASE_URL}/recipes`

    return (dispatch) => {
      dispatch({ type: 'START_FETCHING_RECIPES_REQUEST' });
      fetch(RECIPES_URL)
        .then(response =>{ return response.json()})
        .then(recipes => dispatch({ type: 'Get_Recipes', recipes }));
    };
    
  }

这是我试图从 get 请求中呈现 Recipe 组件的地方

import React, {Component} from 'react';
// import { getRecipes } from '../actions/getRecipes.js';
import Recipe from './Recipe.js'

class RecipeList extends Component {

// componentDidMount(){
//   getRecipes()
// }

render() {
   
   return (
    
  
    <div>
     {this.props.recipes.map(recipe => (<Recipe recipe={recipe} key={recipe.id} />))}
    </div>
   )
    
  }
}

export default RecipeList;

编辑：添加减速器

switch(action.type){
        case 'Add_Recipe':
            const recipe = {
                
                name: action.name,
                ingredients: action.ingredients,
                chef_name: action.chef_name,
                origin: action.origin,
                category: action.category
                
            }

            return{
                ...state,
                recipes: [...state.recipes, recipe],
            }
          
          case 'START_FETCHING_RECIPES_REQUEST':
            return {
                ...state,
            recipes: [...state.recipes],
            requesting: true
        }
        case 'Get_Recipes':
            return {
                ...state, recipes: action.recipes,
                requesting: false
            }
        

          default:
            return state
        
    }
}

我该如何纠正它以使其正常工作？

标签： reactjsreact-redux

解决方案

问题

您没有将配方传递给RecipeList组件，这些配方被提取并可能存储在状态中，并通过RecipeContainer.

解决方案

recipe将状态从RecipeContainertoRecipeList作为道具传递。然后渲染/映射来自props.

食谱容器

class RecipeContainer extends Component{
  componentDidMount() {
    getRecipes();
  }
    
  render() {
    return (
      <div>
        <RecipeInput postRecipes={this.props.postRecipes} /> 
        <RecipeList getRecipes={this.props.recipes} /> // <-- pass recipe state
      </div>
    )
  }
}

const mapStateToProps = state => ({
  recipes: state.recipes,
});

const mapDispatchToProps = dispatch => {
  return {
    postRecipes: (recipe) => dispatch(postRecipes(recipe)),
    getRecipes: () => dispatch(getRecipes())
  }
};

食谱列表

class RecipeList extends Component { 
  render() {
    const { recipes } = this.props;
    return (
      <div>
       {recipes.map(recipe => (
         <Recipe recipe={recipe} key={recipe.id} />
       ))}
      </div>
     );
  }
}

推荐阅读