React Redux - Uncaught (in promise) TypeError: Cannot read property 'props' of undefined

Question

我是 React 新手，请记住这一点。

我看到很多人对 "this" 关键字的绑定有问题，我想我做对了，但是我仍然收到错误 "Cannot read property 'props' of undefined".

我的 React+Redux 应用程序出了点问题，但我不知道是什么。

这是我的代码： Recipes_list.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { getRecipe } from "../actions/index";

class RecipeList extends Component {
    constructor(props) {
        super(props);
        this.functionGetRecipe = this.functionGetRecipe.bind(this);
    }

    functionGetRecipe(recipe_id){
        this.props.getRecipe(recipe_id);
    }

    renderRecipes(recipeData) {     
        const publisher = recipeData.publisher;
        const recipe_id = recipeData.recipe_id;
        const title = recipeData.title;
        const source_url = recipeData.source_url;
        const image_url = recipeData.image_url;

        return (
            <tr onClick={this.props.functionGetRecipe(recipe_id)} key={recipe_id}>
                <td>{publisher}</td>
                <td>{title}</td>
                <td><a href={source_url}>View on original website</a></td>
                <td><img className="img-fluid" src={image_url} /></td>
            </tr>
        );
    }

    render() {
        if (!this.props.recipes) {
            return <div>Nothing to show yet</div>;
        }
        return (
            <table style={{width: "50%"}} className="table table-hover float-right">
                <thead>
                    <tr>
                        <th>Publisher</th>
                        <th>Title</th>
                        <th>Source</th>
                        <th>Image</th>
                    </tr>
                </thead>
                <tbody>
                    {this.props.recipes.map(this.renderRecipes)}
                </tbody>
            </table>    
        );
    }
}

function mapStateToProps(state){
    return { recipes: state.searchRecipes.recipes };
}

function mapDispachToProps(dispatch) {
    return bindActionCreators({ getRecipe }, dispatch);
}

export default connect(mapStateToProps, mapDispachToProps)(RecipeList);

当此 Container/Component 使用值数组 (this.props.recipes) 重新呈现时 Chrome 的控制台记录以下错误：

Uncaught (in promise) TypeError: Cannot read property 'props' of undefined
at renderRecipes (bundle.js:36675)
at Array.map (<anonymous>)
at RecipeList.render (bundle.js:36746)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (bundle.js:7779)
at ReactCompositeComponentWrapper._renderValidatedComponent (bundle.js:7799)
at ReactCompositeComponentWrapper.wrapper [as _renderValidatedComponent] (bundle.js:1530)
at ReactCompositeComponentWrapper._updateRenderedComponent (bundle.js:7752)
at ReactCompositeComponentWrapper._performComponentUpdate (bundle.js:7736)
at ReactCompositeComponentWrapper.updateComponent (bundle.js:7665)
at ReactCompositeComponentWrapper.wrapper [as updateComponent] (bundle.js:1530)

感谢任何帮助。谢谢。

注意：如果我删除与操作相关的所有代码，一切正常，table 会正确显示

======================================== ======================================

编辑：将 onClick={this.props.functionGetRecipe(recipe_id)} 修改为 onClick={this.functionGetRecipe(recipe_id)} returns 我出现以下错误：

bundle.js:36675 Uncaught (in promise) TypeError: Cannot read property 'functionGetRecipe' of undefined

以防万一，这是我的 /actions/index.js:

import axios from 'axios';
const API_KEY = "***********************************";
export const GET_URL = `https://food2fork.com/api/get?key=${API_KEY}`;
export function getRecipe(recipeId) {
    const url = `${GET_URL}&Id=${recipeId}`;
    const request = axios.get(url);

    return {
        type: GET_RECIPE,
        payload: request
    };
}

======================================== ======================================

编辑2：就是这样，现在可以了。这是变化：

constructor(props) {
    super(props);
    this.renderRecipes = this.renderRecipes.bind(this);
}

Answer 1

尝试替换

<tr onClick={this.props.functionGetRecipe(recipe_id)} key={recipe_id}>

作者：

<tr onClick={this.functionGetRecipe(recipe_id)} key={recipe_id}>

编辑：我认为声明你的方法functionGetRecipe()没用你可以直接使用this.props.getRecipe(recipe_id)

编辑 2：尝试绑定 renderRecipes：

constructor(props) {
        super(props);
        this.renderRecipes = this.renderRecipes.bind(this);
    }

React Redux - Uncaught (in promise) TypeError: Cannot read property 'props' of undefined

React Redux - Uncaught (in promise) TypeError: Cannot read property 'props' of undefined

javascript

reactjs

redux

react-redux

react-props