从 fetch 调用中未显示的props

IT技术 reactjs react-redux

2021-05-27 13:55:12

我正在尝试显示食谱，但不确定我的设置是否正确。我正在通过 get 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)

这是我的获取请求....请注意，我将在此处返回我的 Recipe 组件。

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
        
    }
}

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

2个回答

问题

您没有将配方传递给RecipeList已获取并可能存储在状态中的组件，并通过RecipeContainer.

解决方案

将recipe状态从RecipeContainertoRecipeList作为props传递。然后渲染/映射来自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>
     );
  }
}

对此的实际解决方案是我需要在我的 mapStateToProp 函数中显式返回。

例如。

const mapStateToProp = state =>{
  return {
         recipes: state.recipes
    }
}

其它你可能感兴趣的问题

上一篇大量输入 React-native 后，TextInput 变得很慢下一篇Digital Ocean 正在询问我的 Unix 密码，但是一旦我提供它，它就会关闭